Knowledge of react grammar

Want to make APP Same thing as WeChat , Can run small programs smoothly ？ | Experience will send you to Xinjiang 、 Huawei 、 Cherry keyboard ！>>>

created react After the project structure , We need to write a bunch of components , at present react There are two common ways to write components ：

1, Function component ：

import React from 'react';
function LogIn(props){
return(
<button> Sign in </button>
)
}
export default LogIn;

2,class Components ：

import React from 'react';
class LoginControl from React.Component{
constructor(props){
// Data initialization 
super(props);
}
componentWillMount(){
// The data has been initialized , But it hasn't been rendered yet dom, Rarely used 
}
componentDidMount(){
// First render dom, Here you can ask for ajax, and setDate Re render the data 
}
componentWillReceiveProps(){
// After accepting the change of the parent component props When you need to re render components, you use more 
}
componentWillUnmount(){
// Unloading and data destruction 
}
render() {
/*js Handle */
return (
<div>
</div>
)
}
}
export default HomePage1;

Believe in JSX Rendering will not be strange , Not much here , Direct use {} Curly bracket rendering is OK , Note that it has to be effective JavaScript expression .

I'm going to highlight a point , stay react Event handling in , as well as props This important attribute , What's more, how to use and transfer parameters between child and parent components . The following is based on class Components ：

First write a login and logout widget ：

 Sign in ：
import React from 'react';
function LogIn(props){
console.log(props)
return(
<button onClick={props.onClick}> Sign in </button>
)
}
export default LogIn;

 sign out ：
import React from 'react';
function LogOut(props){
console.log(props)
return(
<button onClick={props.onClick}> sign out </button>
)
}
export default LogOut;

Next I'm going to write a login controller to render the components above ：

import React from 'react';
import LogOut from "./LogOut";
import LogIn from "./LogIn";
class HomePage1 extends React.Component {
constructor(props){
// Data initialization 
super(props);
this.logIn = this.logIn.bind(this);
this.logOut = this.logOut.bind(this);
this.state = {
a:1,
b:2,
c:3,
isLogin:false,
user:null
}
}
componentWillMount(){
// The data has been initialized , But it hasn't been rendered yet dom, Rarely used 
}
componentDidMount(){
// First render dom, Here you can ask for ajax, and setDate Re render the data 
}
componentWillReceiveProps(){
// After accepting the change of the parent component props When you need to re render components, you use more 
}
componentWillUnmount(){
// Unloading and data destruction 
}
// Write any way you want to write ******************
logIn(e){
alert(" Log on to the ")
this.setState({
isLogin:true,
user:e
})
}
logOut(){
alert(" Log out ")
this.setState({
isLogin:false,
user:null
})
}
render() {
let button;
if(this.state.isLogin){
button = <LogOut onClick={this.logOut}/>
}else{
button = <LogIn onClick={(e)=>this.logIn('admin',e)}/>
}
return (
<div>
<h1>Hello,{this.state.a+this.state.b}</h1>
{button}
<p>{this.state.user}</p>
</div>
)
}
}
export default HomePage1;

among , I'll briefly talk about the problems in my study ：

1. Just beginning to learn react, I don't know where to write my own way , After searching the documents and Du Niang , not have understood until then , Directly in class Just write in the component , Of course, the method is finished , To trigger him , How to trigger it next , Another problem ,react Two kinds of ：

1.1 stay constructor Write in the build this.LogIn=this.LogIn.bind(this); Why do you write this way , The document is very clear , And then in return Start triggering in the element of onClick="{this.Login}" That's all right. ,,,

1.2 When writing methods , Use the arrow function ,Login = () =>{}, And then in return Start triggering in the element of onClick="{this.Login}" That's all right. ,,,

etc. ,,,,, What if I want to wear parameters ？？ The official website also gives two ways ：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

In both cases ,React The object of the event e Will be passed as a second parameter . If you use the arrow function , The event object must be passed explicitly , And by bind The way , Event objects and more parameters will be passed implicitly . （ I used to use the first method ）

2. about props This attribute , The official website also put forward , Very important attributes , When I was a child, I wrote about this case ....props It is mainly used for parameter transfer between components .

2.1 Father and son pass on value .

. Down the value -- The parent component passes values to the child component
Parent component passed props Passing data that is not a method , Feed component ;

// Parent component 
<Child data={[1,2,3]} />
// Sub components 
console.log(this.props.data);

2. Up by value -- Child components pass values to parent components
Parent component passed props Pass a method to the subcomponent , The subcomponents call the method , And pass the data to the parent component in the form of parameters , The parent component can process the incoming data in this method ;

// Parent component 
import Child from './Child.js';
export default class Parent extend compenent{
getData=(data)=>{
console.log(data);
}
render(){
return (
<div>
Parent component
<Child getData={this.getData}/>
</div>
)
}
}
// Child components 
export default class Child extend compenent{
state={
data:[1,2,3]
}
render(){
const {data}=this.state;
return (
<div>
Child components
<button onClick={()=>{this.props.getData(data)}}><button>
</div>
)
}
}