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

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

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

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

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

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

第二阶段

状态提升

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近的公共父组件中去管理。但是这种无限制的提升也会带来很多麻烦，一旦发生提升，就选哟修改原来保存的组件代码，并且把整个数据路径经过的组件都修改一遍。因此引入了redux来帮助我们管理共享状态。

挂载

react.js将组件渲染，并且构造DOM元素，然后插入页面的过程成为组件的挂载

生命周期

• constructor：初始化state
• componentWillMount：启动工作，如ajax数据拉去，定时器的启动
• componentWillUnmount：数据清理，如定时器的清理。
• componentDidMount：用于一些依赖于DOM的操作
• shouldComponentUpdate(nextProps,nextState)：通过这个组件控制是否重新渲染，如果返回false则不重新渲染。可用在react性能优化上面
• componentWillReceiveProps(nextProps)：组件从父组件接收到新的props之前调用
• componentWillUpdate():组件重新渲染之前调用
• componentDidUpdate:组件重新渲染并把更改变更到真实的DOM以后调用

深度剖析：如何实现一个Vitual DOM算法

ref:用来获取已经挂载的元素的DOM节点，但是记住一个原则 能不用 ref 就不用
基本用法如下

	class AutoFocusInput extends Component {
	  componentDidMount () {
	    this.input.focus()
	  }
	  render () {
	    return (
	      <input ref={(input) => this.input = input} />
	    )
	  }
	}
	ReactDOM.render(
	  <AutoFocusInput />,
	  document.getElementById('root')
	)

this.props.children 可以用来获取组件标签底下的所有元素，并且保存成数组的形式组件使用时编写代码如下

	<Card>
		<h2>React.js 小书</h2>
		<div>开源、免费、专业、简单</div>
		订阅：<input />
	 </Card>

这种写法类似html，标签内部的元素可以使用this.props.children来获取，React.js 就是把我们嵌套的 JSX 元素一个个都放到数组当中，然后通过 props.children 传给了 Card。

	class Card extends Component {
	  render () {
	    return (
	      <div className='card'>
	        <div className='card-content'>
	          {this.props.children}
	        </div>
	      </div>
	    )
	  }
	}

通过打印this.props.children,可以看到

另外，也可以在组件内部把数组中的jsx安置在不同的地方，如

	class Layout extends Component {
	  render () {
	    return (
	      <div className='two-cols-layout'>
	        <div className='sidebar'>
	          {this.props.children[0]}
	        </div>
	        <div className='main'>
	          {this.props.children[1]}
	        </div>
	      </div>
	    )
	  }
	}

dangerouslySetHTML 和 style 属性

react的所有表达式插入的内容都会被自动转义，相当于jq里面的text(…)函数一样

	class Editor extends Component {
	  constructor() {
	    super()
	    this.state = {
	      content: '<h1>React.js 小书</h1>'
	    }
	  }
	
	  render () {
	    return (
	      <div className='editor-wrapper'>
	        {this.state.content}
	      </div>
	    )
	  }
	}

dangerouslySetHTML ：可以做到设置动态html结构，使用方法如下

	 render () {
	    return (
	      <div
	        className='editor-wrapper'
	        dangerouslySetInnerHTML={{__html: this.state.content}} />
	    )
	  }

很有意思的一件事，为什么要把简单的事情搞得这么复杂，名字又长，还要传入一个奇怪的对象，那是因为设置 innerHTML 可能会导致跨站脚本攻击（XSS），所以 React.js 团队认为把事情搞复杂可以防止（警示）大家滥用这个属性。这个属性不必要的情况就不要使用。

一些命名规范和方法的排放顺序

私有方法都用 _ 开头，如_loadUsername，监听方法都用handle开头，如handleSubmit。
另外，组件的内容白那些顺序如下：

1. static 开头的类属性，如 defaultProps、propTypes。
2. 构造函数，constructor。
3. getter/setter。
4. 组件生命周期。
5. _ 开头的私有方法。
6. 事件监听方法，handle*。
7. render开头的方法，有时候 render() 方法里面的内容会分开到不同函数里面进行，这些函数都以 render 开头。
8. render() 方法。

总结

• style接收的是一个对象，这个对象里面是这个元素的css属性键值对，并且带 - 的元素都要去掉 - ,换成驼峰命名，如font-size换成fontSize
• 尽量使用propTypes来定义类型，方便排查错误，规范代码