《react.js》小书非常基础，适合入门新手，非常好理解，规定自己几天时间内阅读完并确保最基本的知识都掌握了，将一些平时回忽略的注意点做了小笔记
react简介
React.js 提供UI层面的解决方案，在实际项目中，需要结合其他库，如Redux、React-router等来协助提供完整的解决方案，也就是我们经常说的react全家桶
第一阶段
探讨了如下几个问题：
- 什么问题导致了我们需要前端页面进行组件化 （为了提高代码复用性）
- 前端页面组件化需要解决什么样的问题 （减少DOM操作）
- react.js是怎么解决这些问题的
优化DOM操作
解决方案：一旦状态发生改变，就重新调用render方法，构建一个新的DOM（更新state->更新html结构的字符串->更新DOM->更新页面），也就是说，只要调用setState组件就会重新渲染，这就消除了手动的DOM操作。
jsx原理
React.createElement会构建一个js对象来描述HTML结构信息，包括标签名、属性、子元素等。所谓JSX其实就是javascript对象
jsx到页面经历了以下过程：jsx->(babel编译+react.js构造)->js对象结构->(ReactDOM.render)->DOM元素->插入页面
事件监听
- react.js不需要手动调用浏览器原生addEventListenner进行事件监听（这里需要补充原生Js事件监听知识点）
- 这些on*的事件只能用在普通的html的标签上，而不能用在组件标签上。
event对象
react.js不需要考虑不同浏览器兼容性的问题，由类似于w3c标准的event.stopPropagation、event.preventDefault等常用方法。
关于事件中的this
一般在某个类的实例方法里面的 this 指的是这个实例本身。但是你在react组件的的方法中把 this 打印出来，你会看到 this 是 null 或者 undefined。
handleClickOnTitle (e) {
console.log(this) // => null or undefined
}
这是因为 React.js 调用你所传给它的方法的时候，并不是通过对象方法的方式调用（this.handleClickOnTitle），而是直接通过函数调用 （handleClickOnTitle），所以事件监听函数内并不能通过 this 获取到实例。
如果你想在事件函数当中使用当前的实例，你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。
class Title extends Component {
handleClickOnTitle (e) {
console.log(this)
}
render () {
return (
<h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1>
)
}
}
组件的state和setState
- 组件可以拥有自己的状态，并且可以改变自身状态
- 改变状态的时候不要直接用this.state=xxx,而要使用this.setState方法。
- 调用setState的时候并不会马上修改state,而是放到更新队列里面，稍后才更新。
- setState可以接受一个函数作为参数，把上一个setState的结果传入这个参数中。
props
- props是由父组件属性传到子组件的，可以是字符串、数字、对象、甚至是函数
- 默认配置 defaultProps
static defaultProps = {
likedText: '取消',
unlikedText: '点赞'
}
- props是不可变的，不可以在组件内部修改props，只能通过父组件主动更新
state vs props
- state是让组件控制自己的状态，props是让外部对组建进行配置
总结
- 组件化可以帮助我们解决前端结构复用性的问题，整个页面可以由不同的组件组合、嵌套组成
- 一个组件由自己的显示形态，组件的显示形态可以由由数据状态（state）和配置参数（props）共同决定。
- 使用className代替class,使用htmlFot代替for
- 条件判断时候在表达式插入里面返回null，那么将什么都不显示，相当于忽略了该表达式的插入
- 自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头。
- React.js 的事件监听方法需要手动 bind 到当前实例，这种模式在 React.js 中非常常用。
- 规则：尽量少的用state,尽量多的用Props
- 使用map等循环渲染列表的时候不要忘记key!!!
- 使用react.js的时候，并不需要担心多次进行setState会带来性能问题
- React.js 中的 、、 等元素的 value 值如果是受到 React.js 的控制，那么就是受控组件。
实践
该实战部分比较简单，实现的功能类似之前我的一个小demo，详情可以见
https://cindybiu.github.io/2018/09/18/react +mock.js 实现留言列表/