大概大半年时间都在用react写项目，一直在笔记上零零星星地记录着，在新的一年即将到来之际，打算整理整理发出来。
一、React是什么？
React是Facebook开源的用于构建用户界面的javascript库。（好些人都觉着React很神秘，接触新事物时，一定要把它看得简单，这样你才有信心战胜它啊，其实入门真的不难）
二、React的特点即它与其他js库相比好在哪里？
1、专注MVC架构中的V（view），使React很容易和开发者已有的开发栈进行融合
2、组件化，React顺应了web开发组件化趋势，从UI抽象出不同的组件，方便多次使用
3、提高造作性能，React抛弃html而应用JSX语法，因为DOM操作非常慢，所以引入虚拟DOM的概念
三、React精髓
在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。
四、JSX
注意点：HTML 里的
class 在 JSX 里要写成 className，因为 class 在 JS 里是保留关键字。同理某些属性比如for 要写成 htmlFor。五、组件
1、组件的初始化
gitInitialState
初始化this.state的值，只在组件装载之前调用一次
但是在ES6中，可以在构造函数中初始化状态
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: props.initialCount };
}
render() {
// ...
}
}
gitDefaultProps
只在组件创建时调用一次并缓存返回的对象
使用 ES6 语法，可以直接定义 defaultProps 这个类属性来替代，这样能更直观的知道 default props 是预先定义好的对象值：
Counter.defaultProps = { initialCount: 0 };render
render是必须的，是组装成这个组件的HTML结构
2、生命周期函数
装载组件触发：
（1）componentWillMount只会在装载之前调用一次，在
render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render
（2）componentDidMount只会在装载完成之后调用一次，在
render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this)获取到组件的 DOM 节点。更新组件触发：
这些方法不会在首次 render 组件的周期调用
componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdate
卸载组件触发：
componentWillUnmount
3、DOM操作
大部分情况下不需要查询DOM去更新新组件的UI，只需要通过设置组件的状态（setState），但是如何直接操作DOM呢？
（1）findDOMNode()
当组件加载到页面后可以通过findDOMNode（）方法拿到组件对应的DOM元素。
（2）ref
在需要引用的DOM元素上设置一个ref属性指定一个名称，然后通过this.refs.name来访问来访问对应的DOM元素
不要再render或者render之前访问refs，不要滥用refs
4、组件详细说明
static
statics 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用；在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的 props 和 state。如果你想在静态方法中检查 props 的值，在调用处把 props 作为参数传入到静态方法。六、表单组件
交互属性：
value，用于<input> <textarea> <select>组件
checked，用于<checkbox> <radio>
selected,用于<option>组件
表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：
-
<input>或<textarea>的value发生变化时。 -
<input>的checked状态改变时。 -
<option>的selected状态改变时。
类型为 radio、checkbox 的<input> 支持 defaultChecked 属性， <select> 支持 defaultValue 属性。
七、state和props
刚开始接触时，我的前辈就跟我说React里最重要的就是运用state和props，之前不明白，现在的我对新手说的话也是如此。
组件先根据自己的props渲染一次自己，props是不可变的，它们从父节点传递过来，被父节点拥有。
为了实现交互，我们给组件引进了可变的state。this.state 是组件私有的，可以通过调用 this.setState() 来改变它，当状态改变时，组件重新渲染自己。
八、React的使用过程中遇到的warning报错锦集
1、
这个问题很多见啊，我当时写我们的AI-4.1列表时，用了Table组件，然后传进去的column里面也都有了key，但是还是报错，之后经检查发现是<a><div>这两个子元素没有key来区分，所以分别加了key，然后warning就消失了
2、vendor.js:1658 Warning: Notice: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)
出错场景：notice提示组件的出现隐藏
为了区分，传递了一个唯一标实的参数key，但是从文档信息看：
attempting to access
this.props.key from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: <ListItemWrapper key={result.id} id={result.id} />). 于是我们改成通过传递id就可以了
PS：React中有两个比较特殊的参数：ref 和 key，不会被传递到组件
Most props on a JSX element are passed on to the component, however, there are two special props (
ref and key) which are used by React, and are thus not forwarded to the component3、vendor-6a78e5c….js:1698 Warning: Unknown prop `place` on <i> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in i (created by Rules (bindStores))
in div (created by Rules (bindStores))
in div (created by Rules (bindStores))
<i style={{float:'right',marginRight:'7px'}} data-tip={__('仅供查询报警对象名称')} place="top" className="iconfont tips"></i>
即一些自定义的元素，最好使用 data- 放在开头。
好了，本人不才，先到此为止。