React 笔记一：简单串讲
github源码在此，记得点星:
https://github.com/brandonxiang/example-react
介绍
可以说React是非常装逼的前端工具，学习成本也相对较高。因为它和es6和webpack都相互结合的很好。所以在学react之前要学习babel和webpack等等，学了react之后又要学redux，react-router，还有很多周边的组件。
组件生态
知乎上很多人讨论react，angular和vue的问题。
我个人认为选择react的原因一定是它的组件生态，详情参考awesome-react-components。相比之下，angular的生态其实也不错，但是angular2的断裂式升级，以及angular1的脏类型的问题，还有angular2的功能完善。这些都让我很难喜欢angular。vue比较适合“单打独斗”的小项目。
入门教程
React 入门实例教程讲解了render的思想，JSX的语法，组件的构成，props和state等等。
数据绑定
state 和 props，两个专有的说法。props更多是属性的单项绑定，也可以是子组件的参数。而state是状态机，可以实现双向绑定，数据交互。
例子
创建一个简单React的demo，方法有很多，这里说一个简单脚手架create-react-app。
npm install -g create-react-app
create-react-app my-app
另外，就是采用yo模板构建工具generator-react-webpack。一口气完成react，webpack以及postcss模板生成。并且生成了单元测试代码
两种写法
参考React Native 中 ES6+ 和 ES5 语法比较
es5 方法写法
这种写法相对传统，有点es5的意思。初始化使用方法getInitialState。
var Hello = React.createClass({
render() {
return <h1>Hello, world</h1>;
}
})
export default Hello
es6类写法
用es6的写法，新颖而亲切。初始化使用方法constructor。
export default class Hello extends Component{
render() {
return <h1>Hello, world</h1>;
}
}
两者之间的区别详情参考React.createClass versus extends React.Component。
PropType
生命周期
我个人感觉这是一个难点，渲染周期的方法，重写该方法可以实现在dom周期中的一些功能，紧密把握着dom的一些功能实现，有点像jquery的感觉。对生命周期的把握，可以实现很多逻辑的功能。
-
componentWillUnmount()
插入真实 DOM之前 -
componentDidMount()
完成插入真实 DOM -
componentWillUpdate()
更新真实 DOM之前 -
componentDidUpdate()
完成更新真实 DOM -
componentWillUnmount()
移除真实DOM之前 -
componentWillReceiveProps()
插入DOM后的Props被更新 -
shouldComponentUpdate()
当新的props和state接受后dom渲染之前，不会再初次渲染和forceUpdate()使用的时候
入门坑
How I Fixed: Warning: React.createElement: type should not be null, undefined, boolean, or number.
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in
参考
转载，请表明出处。总目录前端经验收集器
