《react.js小书》读书笔记二cindy Liu11 MinutesJanuary 11, 2019

《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来定义类型，方便排查错误，规范代码