react基础理解

1 . react 核心思想

a. 组件化
b. 维护自己的状态和UI
c. 自动重新渲染

2. React 是一个全局对象 。其 API 可以分为顶层API和组件API

a. 顶层API
    React.createClass 创建组件类的方法     
    React.render 渲染，将指定组件渲染到指定DOM节点。（新版中使用ReactDOM.render替代）

b. 组件级API
    render: 返回组件内部结构（jsx）

3. 生命周期

a.创建阶段

getDefaultProps: 
    处理 ** props **的默认值，在React.createClass 阶段调用。
    createCalss 阶段 返回一个对象与父组件传入的props 合并，作为该组件的默认属性。
    组件内部禁止修改props，只能通过父组件修改。

b.实例化阶段

React.render 启动之后，就进入实例化阶段,依次调用一下方法。

getInitialState : 初始化组件 state 值，其返回值会赋值给组件的 this.state 属性。
    获取this.state的默认值。(es6中使用 constructor 替代  getInitalState)

componentWillMount : render 之前调用该方法。
    业务逻辑的处理都应该放在此处，比如对 state 的操作等。

render : 根据state值，渲染并返回一个虚拟DOM

componentDidMount :  在render之后调用。 
    在该方法中React会使用render方法返回的虚拟DOM对象来创建真实的DOM结构。
    组件内部可以通过this.getDOMNode()来获取当前组件的节点。

---

state : 组件的属性，主要是用来存储组件自身需要的数据，每次数据的更新都是通过修改 state 属性的值来实现的。
React内部会通过监听state属性的变化，实时的触发render更新虚拟DOM.
virtual DOM ： 将真实的DOM结构映射成一个JSON数据结构

---

c.更新阶段：

发生在用户操作之后或者父组件有更新的时候，会根据用户行为进行相应的页面结构调整。

componentWillReceiveProps : 在 this.props 被修改或者父组件调用 setProps 方法时调用。
    调用this.setState 来完成对 state 的修改。

shouldComponentUpdate : 用来拦截拦截新的 props 或 state 根据逻辑来判断是否需要更新。

componentWillUpdate ： 在 shouldComponentUpdate 返回 true 时调用，组件将更新。

render :  return jsx (返回虚拟DOM), 差异化更新

componentDidUpdate : 组件更新完毕，通常在这里做一些DOM操作。

d.销毁阶段

componentWillUnmount : 这个阶段通常做一些 取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。

4.组件通信

组件嵌套--父子组件

组件并列--兄弟组件

a. 子组件如何调用父组件

this.props.key

b. 父组件如何调用子组件

this.refs.customRef.getDOMNode()

---

笔记来自 东方耀 老师的 reactNative教学之从 React 到 reactNative