《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。

	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 实现留言列表）