准备工作
# 0、react核心库 # 将JSX 语法转为 JavaScript
1、react基本语法
2、一个简单的组件
- React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件；
- 【注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。】
3、组件的生命状态
- 组件的生命周期【挂载、更新、移除】
- getInitialState:是一个比较重要的方法，在组件挂载之前调用一次，可以用来定义初始化的数据，然后在后面调用
- getDefaultProps:
- 在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。 *【该方法在任何实例创建之前调用】，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。
- componentWillMount【挂载】：
- 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用 setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。
- componentDidMount【挂载】：
- 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.findDOMNode() 来获取相应 DOM 节点。
- 如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。
4、事件处理
- react的事件支持有点像是传统的事件绑定方法，通过onClick等绑定事件; 数据的变化可以通过state的变量变【用this.setState方法】，也可以通过全局变量变
5、DOM操作
- React.findDOMNode(component)获取到组件中真实的DOM;
- react可以允许我们通过 ref 来定位一个组件。具体的做法是：先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。
<input ref='myTextInput' />然后就可以通过 this.refs.myTextInput 来访问这个组件。【不过，这里拿到的只是虚拟DOM，而不是真实的DOM。】 - 获取DOM主要是为了用第三方的插件来实现我们的功能，如jQuery。
6、组件组合使用
- 复合组件必须有一个，而且只能有一个父节点;如Box组件
- 复合组件添加方法如
7、组件之间的数据传递
- 组件之间之间的组合使用的时候，this.state和this.props是很重要的一些东西
- 这个demo的数据的交换通过父亲Box组件来实现
- comment_txt，data都是用来绑定子节点的一些方法
- 类似input这种非成对标签，需要"/"结尾如
"<input type="text" ref="input_txt" />" - this.refs用来绑定获取真实的dom节点
- this.props.data.map遍历父元素传过来的数据
- this.setState({list:this.state.list})重新设计数据，会自动刷新
8、Mixins
- mixins是用来做方法复用的，
- 使用方法：mixins:[SetIntervalMixin],
- note：使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin 的场景都可以用组合组件这种模式来做到
9、其他
- Flux等还需要了解，练习
- 服务端渲染需要了解
- 动画等也没有了解
参考文章