cindbiubiu
cindbiubiu

《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 (
	        
React 小书

	        )
	    }
    }

组件的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 中的 、