react婴儿_notes

视频地址： https://haoqicat.com/react-baby/1-react-show
第二版：https://haoqicat.com/react-baby-v2
其他教程：http://www.ruanyifeng.com/blog/2015/03/react.html

react 是用来写UI的前端JS库
组件化:

独立完成任务
组件要足够小
不按技术类型分离，而要按功能模块分离
对外接口要明晰

高内聚：完成一个功能的代码尽量放到一个文件中
低耦合：我们的正常运行不依赖于其他组件

Bable is a JavaScript compiler
(ES6, JSX)
外来数据要流入 React 组件内部，props 属性就是入口。
由于箭头函数中this的特殊性，所以在React.creatClass()中不要使用箭头函数
React组件生命周期

React组件生命周期.png
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
this.props.children 的值有三种可能：如果当前组件没有子节点，它就是undefined;如果有一个子节点，数据类型是object；如果有多个子节点，数据类型就是array。所以，处理this.props.children的时候要小心。React 提供一个工具方法React.Children来处理this.props.children。我们可以用React.Children.map来遍历子节点，而不用担心this.props.children的数据类型是undefined还是object。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求
getDefaultProps & getInitialState
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
获取真实的DOM节点
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual 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')
);

上面代码中，组件MyComponent的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref属性，然后this.refs.[refName]就会返回这个真实的 DOM 节点。需要注意的是，由于this.refs.[refName]属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实 DOM 发生Click事件之后，才会读取this.refs.[refName]属性。React 组件支持很多事件，除了Click事件以外，还有KeyDown、Copy、Scroll等，完整的事件清单请查看官方文档。

表单
用户在表单填入的内容，属于用户跟组件的互动，所以不能用this.props读取


var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.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);

上面代码中，文本输入框的值，不能用this.props.value读取，而要定义一个onChange事件的回调函数，通过event.target.value读取用户输入的值。textarea元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

react婴儿_notes

推荐阅读更多精彩内容