《react.js小书》读书笔记一

《react.js》小书非常基础，适合入门新手，非常好理解，规定自己三天时间内阅读完并确保最基本的知识都掌握了，将一些平时回忽略的注意点做了小笔记和总结

《react.js小书》读书笔记二

《react.js小书》读书笔记三

在线阅读：http://huziketang.com/books/react/

在线OJ试题：http://scriptoj.mangojuice.top/problemsGroups/593a2e29b3838c385539fa4f

第一阶段

探讨了如下几个问题：

什么问题导致了我们需要前端页面进行组件化（为了提高代码复用性）
前端页面组件化需要解决什么样的问题（减少DOM操作）
react.js是怎么解决这些问题的

优化DOM操作

解决方案：一旦状态发生改变，就重新调用render方法，构建一个新的DOM（更新state->更新html结构的字符串->更新DOM->更新页面），也就是说，只要调用setState组件就会重新渲染，这就消除了手动的DOM操作。

jsx原理

React.createElement会构建一个js对象来描述HTML结构信息，包括标签名、属性、子元素等。所谓JSX其实就是javascript对象
jsx到页面经历了以下过程：

事件监听

react.js不需要手动调用浏览器原生addEventListenner进行事件监听（这里需要补充原生Js事件监听知识点）
这些on*的事件只能用在普通的html的标签上，而不能用在组件标签上。

event对象

react.js不需要考虑不同浏览器兼容性的问题，由类似于w3c标准的event.stopPropagation、event.preventDefault等常用方法。

关于事件中的this

一般在某个类的实例方法里面的 this 指的是这个实例本身。但是你在react组件的的方法中把 this 打印出来，你会看到 this 是 null 或者 undefined。

1
2
3

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 中的 <input /> 、<textarea />、<select /> 等元素的 value 值如果是受到 React.js 的控制，那么就是受控组件。

实践

第一阶段的实战部分比较简单，实现的功能类似之前我的一个小demo，详情可以见（react +mock.js 实现留言列表）