- The React component uses the ES6 class syntax:
import React, {Component} from 'react';
class Children extends Component{
constructor(props){
super(props); // Call the parent constructor, which inherits the parent component properties
this.state = {
value:' '.list:[]
}
}
render(){
return ();
}
}
Copy the code- Tag add style class name, not “class “, use “className”
- Props inherits properties from the parent component (one-way data flow);
- Declare reactive variables using state;
- React hooks are named with small humps: onClick, onChange, etc.
- To bind this to the event within the constructor function, write:
this.inputChange=this.inputChange.bind(this);
Copy the codeThis can be used directly within components:
onChange={this. InputChange};Copy the codeIf you do not use this method, you can declare functions as “arrow functions” :
inputChange = (e) = >{
this.setState({
inputValue : e.target.value
})
}
Copy the code- When using loops to generate nodes, remember to set ‘key’ for item:
<ul>
{
this.state.list.map((item,index) =>{
return <li
key={index+item}
onClick={this.deleteItem.bind(this,index)}
>
{item}
</li>
})
}
</ul>
Copy the code- React does not allow you to operate on state directly. For example, to delete an array item in React, you should first copy the array to be operated on and then update the array in state to the array after the operation:
let list = this.state.list; // Make a copy
list.splice(index,1); // Copy the array
this.setState({
list:list // Update after operation
})
Copy the codeWhich means it can’t go like this:
this.state.list.splice(index,1) // Call state directly
this.setState({
list:this.state.list
})
Copy the code- JSX writes comments:
{/* This is a comment */}
Copy the code- React preventDefault() to prevent the default:
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
Copy the code- In React, for is set to ‘htmlFor’ :
<div> <label htmlFor="haha"> </label> <input id="haha" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} /> <button onClick={this.addlist.bind (this)}> </button> </div>Copy the code- React parent passes value to child component: property name = {variable}
<Children content={item}></Children>
Copy the codeUse in child components:
<div>{this.props.content}}</div>
Copy the code- The child calls the parent’s method, passing the parent’s method as an argument:
<XuanXiangKaItem
key={index+item}
content={item}
index={index}
deleteItem = {this.deleteItem.bind(this)} / >Copy the codeChild component calls:
handleDelete(){
console.log(this.props.index);
this.props.deleteItem(this.props.index);
}
Copy the code- In a subcomponent, you cannot modify the props directly because react is a one-way data flow. If you want to change the value of the parent component in a child component, you should pass the methods in the parent component to the child component, via props, and then call the methods in the child component.
- Inside the child component, the values passed by the parent are checked using PropTypes:
import PropTypes from 'prop-types';
XuanXiangkaItem.propTypes= { // Write after class
content:PropTypes.string.isRequired //isRequired indicates that this parameter must be passed
index:PropTypes.number,
deleteItem:PropTypes.func
}
Copy the code- To specify the default value for the props parameter, use defaultProps:
XuanXiangkaItem.defaultProps = {
content:'Default value'
}
Copy the code17. The basic use of ref: // inside the component
ref={(input)=>(this.input = input)} // Use the arrow function to bindUsed in function operations:this.setState({
// inputValue : e.target.value
inputValue : this.input.value / / replace e. arget. Value
})
Copy the code- A pit used with ref and setState:
<ul ref={(ul) => (this.ul = ul)}>
{
this.state.list.map((item,index) = >{
return (
<XuanXiangKaItem
key={index+item}
content={item}
index={index}
deleteItem = {this.deleteItem.bind(this)}
/>)})}</ul>
Copy the codePrint the length of ul array after calling setState:
addItem = (a)= >{
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:' '
})
console.log(console.log(this.ul.querySelectorAll('div').length)); // call it here
}
Copy the codeOne less result will be printed because setState is asynchronous and we will call console.log before updating the virtual Dom. To solve this problem, use the setState callback function:
addItem = (a)= >{
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:' '= > {}, ()// Call the setState callback here
console.log(this.ul.querySelectorAll('div').length); })}Copy the codeApplication scenario: After we have made some data updates and we want to get the changed virtual Dom immediately, we should use the setState callback function. 19. The React lifecycle is divided into four phases:
Initialization: Initialization phase. Mounting: Mounting phase Updation: Renewal stage. Unmounting: Destruction stageCopy the code
The render function is a lifecycle function that is automatically called when props and state change.
Constructor is not called a lifecycle function; it is merely the syntax of ES6 and should not be considered a lifecycle function, although it has the same properties as a lifecycle function. Think of it as the Initialization phase of React, defining the props and the state.
Mounting Stage Mounting Stage Mounting Stage Mounting Stage Mounting Stage Mounting Stage Mounting Stage Mounting Stage Mounting Stage
- ComponentWillMount: Executed when the component is about to be mounted to the page,
- Render: executes when the props and state of the page change,
- ComponentDidMount: Executes when the component is mounted (inserted into the DOM tree).
ComponentWillMount and componentDidMount are periodic functions that are executed only once on a page refresh, but render is executed whenever the props and state of the page change. So we could write asynchronous requests in the componentWillMount and componentDidMount hooks, but using RN would conflict with the componentWillMount hook. So the recommendation is to make asynchronous requests in the componentDidMount function.
The Updation stage is mainly an update stage, which consists of two parts: the props property change and the state state change.
- ShouldComponentUpdate: This should return a Boolean result, which must have a value. Simply put, return true to allow component update. Return false to reject component updates,
- ComponentWillUpdate: Before the component is updated, but shouldComponenUpdate is executed after. But if shouldComponentUpdate returns false, this function is not executed,
- ComponentDidUpdate: Executes after component updates are complete.
Unmounting: Destruction Phase Unmounting Indicates the destruction phase
- ComponentWillUnmount: Executed when a component is removed from the page
There is a special life cycle function: componentWillReceiveProps function.
ComponentWillReceiveProps: child components receive passed to the parent component parameters, the parent component render function to be executed, the life cycle will be executed.
- The performance of a program can be optimized by taking advantage of some properties of lifecycle functions: For example, the parent component has an input box, and the value of the input box passes props to the child component, causing the child component to re-call the render function. But we don’t want the child component to keep calling render while we’re typing, which would cause performance loss. We just want it to be that when we’re done typing, The render call of the child component will do, in which case we can use the lifecycle to optimize performance. We listen to the sub-component’s update cycle and compare the props passed before and after:
shouldComponentUpdate(nextProps,nextState){
if(nextProps.content ! = =this.props.content){
return true
}else{
return false}}//shouldComponentUpdate has two parameters: nextProps: the changed attribute; NextState: The changed state;
Copy the codeTo be continued…
See the React website and the Tech fat blog