react小书学习笔记

先贴个学习链接 http://huziketang.mangojuice.top/books/react/

第一阶段

{} 内可以放任何 JavaScript 的代码，包括变量、表达式计算、函数执行等等。 render 会把这些代码返回的内容如实地渲染到页面上，非常的灵活。
我们来一个关于 state 和 props 的总结。
state 的主要作用是用于组件保存、控制、修改
自己
的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。
state 和 props 有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。一个组件的 state 中的数据可以通过 props 传给子组件，一个组件可以使用外部传入的 props 来初始化自己的 state。但是它们的职责其实非常明晰分明：
state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。
如果你觉得还是搞不清 state 和 props 的使用场景，那么请记住一个简单的规则：尽量少地用 state，尽量多地用 props。
没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。前端应用状态管理是一个复杂的问题，我们后续会继续讨论。

第二阶段

state = {
arras: []
}
现在存在两个同级组件：
compoment1需要用arras
compoment2也需要用arras
这时，如果把arras存放在任意一个组件的state中，另一个组件都无法获取到数据。所以，我们将arras放在compoment1和compoment2的公共父组件compoment中，再利用props传递数据给两个子组件。这种方式叫状态提升。
组件挂载

ReactDOM.render( <Header />, document.getElementById('root'))

会被编译成: 
ReactDom.render(
    React.createElement(Header, null)
    document.getElementById('root')
)           //其实我们把Header组件传给React.createElement函数，又把函数返回结果传给React.render

具体过程：
const header = new Header(props, children)
const headerJsxObject = header.render()
const headerDOM = crateDOMFromObject(headerJsxObject)
document.getElementById('root').appendChild(headerDOM )


-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()


class Header extends Component {
  constructor () {
    super()
    console.log('construct')
  }

  componentWillMount () {
    console.log('component will mount')
  }

  componentDidMount () {
    console.log('component did mount')
  }

  render () {
    console.log('render')
    return (
      <div>
        <h1 className='title'>React 小书</h1>
      </div>
    )
  }
}
=>
construct
component will mount
render
component did mount

第三阶段