深入理解 React 的生命周期方法(1)

感谢 Jonathan Creamer 的分享

React 组件

纯函数

函数接收确定的输入，会返回确定输出，没有副作用也就是函数不会干一些多余的事。
有关函数式编程中纯函数之所以受欢迎，就是因为他简单，简单的让我们每次都看到其确定的输出。

import ReactDOM from 'react-dom';
function HelloWorld({
    text
}){
    return(
        {text}
    )
}

ReactDOM.render(,document.body)

可以满足您对组件需求
简单
状态是由上层的组件来进行控制

JSX to JS

import React, { PureComponent } from 'react'

function HelloWorld(_ref){
    var text = _ref.text;

    return React.createElement(
        "h1",
        null,
        text
    )
}

JSX 是通过创建元素来对 DOM 树的抽象的方式
ReactDOM
在 JSX 定义元素名称使用小写表示内建组件
在 JSX 中首字母大写命名的组件表示是自定义组件

React Component 做类

class HelloWorld extends React.Component {
export default class HelloWorld extends Component {
    render() {
        const text = this.props;
        return (
            
                {text}
            
        )
    }
}

由于 React 作为 UI 框架，所以在 Component 核心的方法就是 render
以继承方式来获取 ReactDOM 来渲染创建视图
react 是单向数据流，props 是从上层传入，我们无法修改，可以将 props 看出只读的属性来使用
可以使用状态控制界面长什么样子

生命周期方法

其实在 React 生命周期很多，不过根据将 DOM 绑定到 DOM 树、解绑定和更新 DOM 这三件事我们通常将生命周期划分为 3 大块 Mounting、Updating 和 Unmounting ，然后再进行细分。

Mounting

constructor()
componentWillMount()
render()
componentDidMount()

Updating

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

Unmounting

componentWillUnmount()

construct

    constructor(props){
        super(props)
        this.state = {}
    }

constructor 是 es6 引入到 javascript 中去的，react 团队将其作为生命周期一个阶段。

可以做一些初始化工作
每次绑定组件时只会被调用一次
初始化状态
如果不使用 super(props) 就会报错

有关state，我们几乎每天都在用。

state 可以表示将要发生的内容，也就是 state 的改变决定界面将要显示什么。
state 也会根据用户操作来改变界面
3.state 也会加载数据呈现到界面
用于储存信息?

    constructor(props){
        super(props)
        this.state = {
            text:""
        }
        this.update = this.update.bind(this);
    }

    update(e) {
        const text = e.target.value;
        this.setState({ text })
    }

需要使用 bind 将方法绑定到 this 上才能生效(update)
每次 setState 后都会触发 render 方法
不要使用 this.state.text = "foo" 来更新状态

setState 是异步的

错误做法

 this.setState({count: this.state.count + props.count});
    doSomething(this.state.count)

正确的做法

this.setState((prevState, props)=>({
        conter:prevState.count + props.count
    }))

在计算时候尽量根据上一次的 state，而不是当前的 state，setState 是异步的无法确定是计算是否完成。

constructor(props){
        super(props)
        this.state = {
            counter:0
        }
        this.doSomething = this.doSomething.bind(this);
    }

    doSomething(){
        this.setState((prevState, props)=>({
            
            counter:prevState.counter + props.counter
        }))
    }
    

    render() {
        return (
            
                {this.state.counter}
                
            
        )
    }

componentWillMount

在 Dom ready 之前。

props 和 state 都已经就绪
可以调用 setState 方法
多数情况不会使用 componentWillMount 而是使用 constructor

componentDidMount

jQuery plugin time: trollface
DOM 已经就绪
是引入插件的时机
ref 也可以使用
可发布一些事件来做一些事