What knowledge should I learn about react? Summary of react knowledge points (with complete examples)

This article mainly introduces the learning about react, and summarizes the knowledge points about react. Let’s start reading the content of this article

Officially start learning react

1. If the first letter of a component in react is uppercase, it will be regarded as a custom component. If it is lowercase, it will be regarded as the DOM's own element name. If the first letter of your custom component name is lowercase, no error will be reported, but it will not be displayed.

2. There can only be one node in the outermost layer of the return of a custom component.

3. There cannot be statements in {} in the HTML you write, but there can be evaluation expressions. But you can write the statement in a function and then call the function in {}.

4. Function names and label names are named in camel case.

5. Use htmlFor and className. For example f48f817659b5fa20e8078bc1b66e32afName8c1ecd4bb896b2264e0711597d40766c

6. Style writing: You can use var style = {color: "red", backgroundColor:" in jsx blue"} and then add style={style} in the custom tag. Remember to use camel case naming.

7. Non-DOM attributes:

a. dangerouslySetInnerHTML: insert HTML code directly into JSX

b. ref: parent component references child component

c. key: improve rendering performance. diff algorithm

8. Functions running in each life cycle of the component: a. Initialization.

b. Running.

c. Destroy.

9. Usage of attributes:

a, c66779f069bd2b7ec0a732d614208d0d //Assign the value "abc" to the attribute name

b,

var props = {
　　one:"123",
　　two:"456"　　
}
<HelloWorld {...props}/>　　//展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body);

a.setProps({name:"Tim"}); //This usage is not recommended, it violates the design principles of React (the latest version seems to have removed this function? Console.log comes out and grabs the prototype chain After searching, I couldn't find this function, only setState)

10. Usage of state:

 var HelloWorld = React.createClass({             render:function(){                 return e388a4556c0f65e1904146cc1a846beeHello,{this.props.name||"world"}94b3e26ee717c64999d7867364b1b4a3             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:'',                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     3d6f15d111504205b90761d1b885e19b
                     3aac1c4d464391a52269ddfd6b12d6a8
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a6d3e660a2713293fe38ad9ec2a46721
         ,document.getElementById("root"));

11. Properties and status Similarities and differences

12. Event processing function

13. Properties of event objects

14. Collaborative use of components

Collaborative use between father and son You can use child components to call methods of parent components. To achieve this goal, the parent component is passed to the child component through prop

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var GenderSelect = React.createClass({             render:function(){                 return 0af7195d42db1dffc2a9a5f85aaa2523
                     859be17dfcd6af2d26185135fb5bd8fc男4afa15d3069109ac30911f04c56f3338
                     302223510126f57919da8bd0aae4999d女4afa15d3069109ac30911f04c56f3338
                 18bb6ffaf0152bbe49cd8a3620346341             }         });         var SignupForm = React.createClass({             getInitialState:function(){                 return {                     name:'',                     pwd:'',                     gender:'',                 }             },             handleChange:function(name,e){                 var newState = {}                 newState[name] = e.target.value;                 this.setState(newState);             },             handleSelect:function(e){                 this.setState({gender:e.target.value});             },             render:function(){                 console.log(this.state)                 return ff9c23ada1bcecdd1a0fb5d5a0f18437
                     6bdab968141063db56c595ca92e6ba13
                     b09b07021e9bc4f0c6ac9ccf14b9d325
                     bb6e2821895de793301ee6cda0d13d50
                 f5a47148e367a6035fd7a2faa965022e             }         });         var a = ReactDOM.render(380d7116d918a5f1222d431cfa4f7858,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

Parent-child component interaction(If you want to see more, go here PHP Chinese website React Reference Manual column to learn)

The sibling components can be implemented by passing the child component A to the parent component, and the parent component then passes it to the child component B.

15, mixin

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return 84c464c714467c62ed8a7b74d3934788             }         });         var a = ReactDOM.render(b242f848c3983ea1d4adbc5496a81c19,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixin example

Advantages and Disadvantages:

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var BindingMixin = {             handleChange:function(name){                 var that = this;                 return function(e){                     var news = {};                     news[name] = e.target.value;                     that.setState(news);                 }             }         };         var Example = React.createClass({             //这里命名必须为mixins
             mixins:[BindingMixin],             getInitialState:function(){                 return {                     text:''                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     5985a603fea88064e808209d741039f4
                     e388a4556c0f65e1904146cc1a846bee{this.state.text}94b3e26ee717c64999d7867364b1b4a3
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a7e09b9eeb1a809bc82d2666b8e06659,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixin

16. Controllable components and uncontrollable components

Controllable components have no value Hard-coded, such as value={this.state.value}.

Uncontrollable is the opposite.

Try to use controllable components

Problems encountered:

1. In the wepack.config.js configuration item, because the loader in the module has multiple configuration items , so it should be loaders, but I wrote loader, which caused the subsequent configuration items to not take effect and many compilation problems occurred. . .

2. In the return tag in the render of the component, forget to type / at the end of the tag. For example, e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 is written as e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee react will recognize it as two If a p tag is used, it will report embedded: Unterminated JSX contents.

3. All unpaired tags in render must be closed, such as: 076402276aae5dbec7f672f8f4e5cc81 0f0306f9b187f2e363126bc29c8b1420 otherwise An error will be reported: embedded: Expected corresponding JSX closing tag for

4. A very interesting thing is that if I setState a certain attribute in a certain function, then the attribute will not be printed out immediately. correct result. The correct result is to be in the componentDidUpdate function, that is, wait until the component is updated before printing it out.

5. If the prop of the child component is updated in the parent component, please do not put this prop into the getInitialState function as a property, because if the prop is updated, the child component will not update the properties in the state. (You can view the table in 11).

6. If you use es6 syntax, that is, use the method of inheriting React.Component to build components, you cannot use the getInitialState() function, and a warning will be reported: Warning: getInitialState was defined on TodoApp, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

Solution: Set constructor

constructor(props){
　　super(props);
      this.state = {
　　　　example:'example',
　　}
}

This article ends here (if you want to see more, go to the PHP Chinese websiteReact User Manual column to learn ), if you have any questions, you can leave a message below.

The above is the detailed content of What knowledge should I learn about react? Summary of react knowledge points (with complete examples). For more information, please follow other related articles on the PHP Chinese website!