react学习散记

1. 父组件向子组件通过可以通过props,但是父组件如果想要访问子组件的DOM元素或者子组件本身（虽然这种情况比较少见），可以用refs。
   父组件访问子组件的推荐办法：使用函数

render: function() {
    return (
      <TextInput
        ref={function(input) {
          if (input != null) {
            input.focus();
          }
        }} />
    );
},

这个ref函数在装载后或者消毁时执行，参数input就是TextInput这个组件的实例，这样就可以直接对组件实例本身进行操作。中间的判断是基于组件消毁时为null的情况进行规避，防止内存泄漏。

2. 表单元素在react中非常特殊，因为要和用户交互相关联，所以和其它HTML元素不太一样。

3. 在JSX中可以嵌入各种表达式，只需要将它们用{}包起来就行。在JSX中也可以使用各类的JS语法，也必须用{}包起来。大原则就是：使用<>来使用HTML语法，使用{}来调用JS语法。

4. JSX允许在模板中插入一JS变量，如果该变量是一个数组，就会展开这个数组的所有成员。

<script type="text/babel">
    let names = [
      <h1 key={'a'}>Hello World!</h1>,
      <h2 key={'b'}>React is coool!</h2>,
      <h3 key={'c'}>Now I'm learning it~</h3>
    ]
    ReactDOM.render(
      <div>
        {names}
      </div>,
      document.getElementById('root')
    )
  </script>

5. 创建组件

• 创建组建有多种办法，React.createClass()是比较常用的一种ES5方法，除此之外还有class方法和函数式方法。推荐使用class方法。
• 组建只能包含一个顶层标签。
• 在组件一级可以加入任意属性，实例化后通过this.props可以使用这些属性。
• 添加组件属性，for要写成htmlFor，class要写成className，因为保留字的关系。

6. 获取组件的子节点：this.props.children。一般搭配React.Children使用，这是一个例外情况，单独记。

7. 使用propTypes来验证组件属性的类型

<script type="text/babel">
    let Hello = React.createClass({
      propTypes: {
        name: React.PropTypes.string.isRequired,
        age: React.PropTypes.number.isRequired,
      },

      render: function () {
        return <h1>Hello, {this.props.name}, my age is {this.props.age}</h1>
      }
    })
    ReactDOM.render(
      <Hello name={'小明'} age={11} />,
      document.getElementById('root')
    )
  </script>

8. JSX模板中样式的写法

style={{opacity: this.state.opacity}}

第一个大括号是JS语法，第二个是对象。

9. AJAX

componentDidMount: function() {  
    this.serverRequest = $.get(this.props.source, function (result) {  
      var lastGist = result[0];  
      this.setState({  
        username: lastGist.owner.login,  
        lastGistUrl: lastGist.html_url  
      });  
    }.bind(this));  
  },  
  
  componentWillUnmount: function() {  
    this.serverRequest.abort();  
  }  

在组件装载成功后，发出请求，但是这个请求本身是异步的；有可能组件缷载时请求还没完，所以要在组件将要缷载时废止这个请求。