A brief discussion on some summary of React properties and status-PHP开发-php.cn

A brief discussion on some summary of React properties and status

高洛峰

Release： 2016-12-06 13:11:42

Original

1407 people have browsed it

1. Attributes

1. The first method of use: key-value pair

//Array

//Define a function

2. The second method: the expanded object form of three points

var props = {
 
one :”123”,
 
tow :321
 
 }
 
<ClassNameB {…props} />

Copy after login

Adding three quotation marks is equivalent to getting two attributes (one and two)

3. setProps form: through Components update properties, and properties cannot be modified inside the component, because it will violate the component design principles (avoid as much as possible)

var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);
 
instance.setProps({name:”Tom" });

Copy after login

2. Status: the status of things, which are constantly changing and handled by things themselves/private things Attribute

getInitialState: Initialize the unique state of each instance

setState: Update the component state

setState will trigger the diff algorithm: determine the difference between state and page results, whether it needs to be updated

3. Comparison of status and attributes

State and Properties will trigger render updates and are all pure JS objects. Status: It is related to itself and is neither affected by parent components nor child components. Properties: It cannot be modified by itself and can only be obtained from the parent component. Properties, the parent component can also modify its properties

The fundamental difference: what needs to be modified and maintained when the component is running is the state

Four. Get familiar with a simple demo:

<!DOCTYPE html>
 <html>
  <head>
   <meta http-equiv=&#39;Content-type&#39; content=&#39;text/html; charset=utf-8&#39;>
   <title>daomul&#39;s example</title>
   <link rel="stylesheet" href="../shared/css/base.css" />
  </head>
  <body>
   <h1>Text demo</h1>
  <div id="container">
 
  </div>
 
  <script src="../shared/thirdparty/es5-shim.min.js"></script>
  <script src="../shared/thirdparty/es5-sham.min.js"></script>
  <script src="../shared/thirdparty/console-polyfill.js"></script>
  <script src="../../build/react.js"></script>
  <script src="../../build/JSXTransformer.js"></script>
  <script type="text/jsx">
 
    //内容组件
    var Content = React.createClass({
     getInitialState:function(){
      return {
       inputText:&#39;&#39;,
      };
     },
     handleChange:function(event){
      this.setState({inputText:event.target.value});
     },
     handleClick:function(){
      console.log("props name is " + this.props.selectName + " \n and inputText is " + this.state.inputText);
     },
     render:function(){
 
      return <div>
       <textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>
       <button onClick = {this.handleClick}>sumbit</button>
      </div>;
     },
    });
 
    //评论组件
    var Comment = React.createClass({
     getInitialState:function(){
      return {
       names:["Tom","Axiba","daomul"],
       selectName:&#39;&#39;,
      };
     },
     handleSelect:function(){
      this.setState(
        {selectName : event.target.value}
       );
     },
     render:function(){
      var options = [];
      //往options中添加子option
      for (var option in this.state.names) {
       options.push(<option value={this.state.names[option]}> {this.state.names[option]} </option>)
      };
      return <div>
       <Content selectName = {this.state.selectName}>
       </Content>
       <select onChange = {this.handleSelect}>
        {options}
       </select>
      </div>;
     },
    });
 
    //start render
    React.render(<Comment></Comment>,document.body);
  </script>
 </body>
</html>

Copy after login