The data transfer

After the higher-order components are installed, the ref is no longer available and the original approach is adopted

The son call father

ParentData <Child parentData={this.state}></Child> The value of this.props. ParentDataCopy the code
Funcs = {func1: this. Func1 func2: this. Func2 func3: this. Func3} < Child {... funcs}></child>Copy the code

The father called son

  • Ref
Not yet usedCopy the code
  • Ref failure (under higher-order components)
During the life cycle of a child component, the parent component method is called, passing itself thisCopy the code

Component structure

React’s directory structure is not as clear as Vue’s

class

  • Outside the class
1. Import // import dependencies and components 2. Const // class external variables, this is not required when called, but it is not recommended. Personally, it feels like a directive, which is equivalent to adding a directive to the classCopy the code
  • The class (render)
Constructor (props) {super(props); This. state = {// 1. Store the value of the view to be updated // 2. DataType: 0} this.databool =false// Changes, but does not need to update the value of the view, put it here} dataValue ='value'// It is not recommended to declare values inside a class, only functions inside a class. * The child changes the value of this.props. XXX directly to synchronize the value of the parent componentCopy the code
ComponentDidMount // props props props props props props props props props props props props props props props propsCopy the code
  • Within the class (render)
1 returnBefore further processing of the data, you can take JSX and encapsulate each 2returnThe idealized state is that only components and judgment display logicCopy the code
  • Single data flow

This points to the

The function definitions

  • declarative
function func() {// Common declaration}Copy the code
  • expression
var val = function funcFunc = () => {// Only expressions can be used}Copy the code

A function call

React calls to functions in render cause this pointing problems

There are three ways to break it

  • Use the arrow function in render
The function is normally declarative. Most methods recommend <inputtype="button" value="Log" onClick={() => this.logMessage()} />
Copy the code
  • Arrow function in class
This is not recommended and must be used unless passed to child componentslogMessage = () => {
    console.log(this.state.message);
};

<input type="button" value="Log" onClick={this.logMessage} />
Copy the code
  • es6 bind
// Function definitionlogMessage() {
    console.log(this.state.message);
}
// render
<input type="button" value="Log" onClick={this.logMessage.bind(this)} />
Copy the code

Optimization strategy

Because of the CSS and the one-way data flow, the React code has to be constantly ripped apart, not just components, but code blocks to take requests, const, out of the main fileCopy the code

block

Something that has yet to be defined

  • Local introduction
Components are created to reuse and write less repetitive code. React is used by each component instead of importing it globally like Vue. For example, each component automatically imports' import react,from'react'; `Copy the code