React 笔记

JSX

1. React 采用jsx语法,需用bable.js转义.
2. JSX 语法可以和html 混写. html以< 开头, JSX以( 开头
3. 采用ReactDOM.render 来定义React渲染
4. 数组 {array} 在render方法会被concat(拼接)
5. React.creatClass(new function() {}); 来创建一个新的React Component

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

6. Component 的取名首字母必须大写
7. 通过 React.Children来访问子节点:

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

8. this.propTypes 定义组件接受的参数

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

9. this.refs.{DOM} 来引用render的dom

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>
    );
  }
});

10. getInitialState 在invoked before a component is mounted

11. use component attributes to register event handlers, just like
    *onClick *onKeyDown onCopy
    etc. Official Document has all supported events

12. this.state 描述变化量，可通过Ui操作更新.
    this.props 表述component的属性，不可变

13. React 生命周期

Mounting
These methods are called when an instance of a component is being created and inserted into the DOM:
constructor()
componentWillMount()
render()
componentDidMount()

Updating
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

Unmounting
This method is called when a component is being removed from the DOM:
componentWillUnmount()