React 笔记
一、JSX 语法 疑难点
class => className
for => htmlFor
组件 大写开头
js表达式 {} 子组件可以作为表达式
注释 {/注释/} or <Nav /注释/ >
自定义属性 data-
<Component {...props} />
style 属性: { CSS 属性构成的 JS 对象}
onChange 事件: 不需要 onBlur 去触发
表单的表现差异大
dangerouslySetInnerHTML 传入一个对象:{ __html: 相当于元素的 innerHTML}
style 接受一个对象，这个对象里面是这个元素的 CSS 属性键值对
<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小书</h1>
二、组件
基本概念：
props 组件属性
state 组件可看成一个“状态机”，state组件当前状态，通过this.setState()方法更新设置state，将调用render重新渲染UI
划分状态数据（什么数据属性可以当做状态：）
无状态组件
this.setState({}) 不会马上更新，将参数{}放入一个更新队列，
this.setState(fn) 异步回调写法，参数为一个函数
一个事件循环只会渲染一次，一个事件循环中多个setState会合并后再渲染
配置组建 props
默认配置 defaultProps
static defaultProps = {
likedText: '取消',
unlikedText: '点赞'
}
总结
为了使得组件的可定制性更强，在使用组件的时候，可以在标签上加属性来传入配置参数。
组件可以在内部通过 this.props 获取到配置参数，组件可以根据 props 的不同来确定自己的显示形态，达到可配置的效果。
可以通过给组件添加类属性 defaultProps 来配置默认参数。
props 一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果
受控组件的概念，React.js 中的 <input /> 、<textarea />、<select /> 等元素的 value 值如果是受到 React.js 的控制，那么就是受控组件。
组件之间使用 props 通过父元素传递数据的技巧
将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载
（这个定义请好好记住）。其实 React.js 内部对待每个组件都有这么一个过程，也就是初始化组件 -> 挂载到页面上的过程。所以你可以理解一个组件的方法调用是这么一个过程：
-> constructor()
-> render()
// 然后构造 DOM 元素插入页面
这当然是很好理解的。React.js 为了让我们能够更好的掌控组件的挂载过程，往上面插入了两个方法：
-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
一个组件可以插入页面，当然也可以从页面中删除。
-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 从页面中删除
React.js 也控制了这个组件的删除过程。在组件删除之前 React.js 会调用组件定义的 componentWillUnmount：
-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除
state vs props
一个组件的 state 中的数据可以通过 props 传给子组件，一个组件可以使用外部传入的 props 来初始化自己的 state
state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。
生命周期：
有7个方法根据执行时机，可分为3类：（组件挂载、组件更新、组件移除）
执行时机：
Mount：已插入真实 DOM；Update：正在被重新渲染；Unmount：已移出真实 DOM
两种类型处理函数：
will 函数在进入状态之前调用，did 函数在进入状态之后调用
两个特殊状态处理函数
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
组件挂载：
componentWillMount 渲染前调用一次，这个时候DOM结构还没有渲染
componentDidMount 渲染完成后调用一次，这个时候DOM结构已经渲染了
组件更新：
*componentWillReceiveProps 初始化渲染不会调用，在接收到新的props时，会调用这个方法
*shouldComponentUpdate 初始化渲染不会调用，接收到新的props或state时调用
componentWillUpdate 初始化渲染不会调用，更新前调用
componentDidUpdate 初始化渲染不会调用，更新后调用
组件卸载：
componentWillUnmount 组件移除前调用（例如清除内存，解除事件的监听）
通俗讲，React 将组件在web中的形成、修改和渲染等划分为若干个阶段，组成组件的生命周期。在一个完整的生命周期内，一个组件会经过若干个阶段，在特殊的阶段组件会调用一个特别的生命周期方法。如下：
- constructor(props)
- componentWillMount()
- render()
- componentDidMount()
- componentWillReceiveProps(nextProps)
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate(nextProps, nextState)
- render( )
- componentDidUpdate(prevProps, prevState )
- componentWillUnmount( )
事件
DOM操作
组合组件
组件通信
Mixing
三、表单
四、动画
五、测试、调试
六、数据源
七、服务端渲染
