react入门知识点

1、使用

<!DOCTYPE html>
<html>
<head>
   <script src="../build/react.js"></script>
   <script src="../build/react-dom.js"></script>
   <script src="../build/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
</body>
</html>

最后一个<script>的type属性为text/babel，这样可以在其中应用jsx语法。

2、JSX语法

遇到<开头就用HTML规则解析；遇到{开头，就用javascript解析。

3、组件

  var HelloMessage = React.createClass({
     render: function() {
         return <h1>Hello {this.props.name}</h1>;
     }
  });
  ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('example')
  );`

HelloMessage就是一个组件类，组件类必须以大写字母开头，必须有自己的render方法，用于输出组件，还必须只能包含一个顶层标签。
组件类可以在使用时可以加入任意属性，其加入的属性可以在组件类内部的this.props对象上获取到。

this.props.children属性。它表示组件的所有子节点

var NotesList = React.createClass({
  render: function() {
    return (
    <ol>
    {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
    }
    </ol>
  );
 }
});

ReactDOM.render(
    <NotesList>
      <span>hello</span>
      <span>world</span>
    </NotesList>,
    document.body
);

如果当前组件没有子节点，this.props.children就是undefined;如果有子节点，数据类型就是object;如果有多个子节点，数据类型就是array。React提供了一个方法React.Children直接处理this.props.children。

PropTypes属性，验证组件实例的属性是否符合要求。在组件类中定义属性:
```
  propsTypes: {
    title:React.PropTypes.string.isRequired
  }
```

如上定义这样的属性后，在使用组件时，就必须在组件上加入一个title属性，且其类型时字符串类型，才能通过验证。 getDefaultProps方法用来设置组件属性的默认值。

4、获取真实DOM节点

组件并不是节点，知识一种数据结构，叫做虚拟DOM。只有插入文档之后，才会变成真实的DOM。根据React的设计，所有DOM变动，都会在虚拟DOM上发生，然后在将实际发生的变动反应在真实的DOM上，这种算法就做DOM diff
要从组件获取真实的DOM节点，这是就需要ref属性

  var MyComponent = React.createClass({
      handleClick: function() {
          this.refs.myTextInput.focus();
      },
      render: function() {
          return (
              <div>
              <input type="text" ref="myTextInput" />
              <input type="button" value="Focus the text input" onClick=      {this.handleClick} />
              </div>
          );
       }
    });

    ReactDOM.render(
        <MyComponent />,
         document.getElementById('example')
    );

this.refs.[refName]就会返回这个真实的DOM节点。

5、this.state

组件类中getInitialState方法用于定义初始状态，这个对象可以通过this.state属性读取，同时this.setState方法可以修改状态值，修改状态值会自动调用render方法渲染组件
写一个简单的表单：

    var Input = React.createClass({
         getInitialState: function(){//设置初始值
            return {value:'Hello!'};
          },
          handleChange: function(evt){
             this.setState({value: evt.target.value})
          },
          render: function(){
              var value = this.state.value;
              return (
                  <div>
                        <input type="text" value={value} onChange={this.handleChange} />
                        <p>{value}</p>
                  </div>
              );
          }
    });
    ReactDOM.render(<Input/>,document.body)

react入门知识点