一起学React--元素渲染和生命周期

1. JSX

JSX是Javascript的语法拓展，在React中通过JSX渲染元素

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

类似模版渲染，jsx可以通过变量来定义，然后在React中渲染。

在jsx中定义一些属性是使用的小驼峰的写法，如className，tabIndex

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

所以事实上jsx还是 React.createElement(component, props, ...children) 的语法糖。

2. React元素渲染

React中通过 ReactDOM.render 的方式渲染元素，配合上强大的jsx语法，一切皆为变量，一切在 {} 的变量都能被渲染。

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {newDate().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

3. React生命周期

• constructor()

执行构造函数

• render()

渲染

• componentDidMount()

在Dom树渲染完成后立即调用componentDidMount（）。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。

如果使用DidMount 记得要在组件使用之后取消订阅，componentWillUnmount

• shouldComponentUpdate() (比较少用)

当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能：一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染.无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

• componentDidUpdate()

组件更新

componentDidUpdate(prevProps, prevState, snapshot)

更新发生后立即调用componentDidUpdate（）初始渲染不会调用此方法。

将此作为在更新组件时对DOM进行操作的机会。只要将当前props与之前的props进行比较（例如，如果props未更改，则可能不需要网络请求），这也是进行网络请求的好地方。

componentDidUpdate(prevProps) {
  // 不要忘了比较props的状态
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

• componentWillUnmount()

组件卸载

在卸载和销毁组件之前立即调componentWillUnmount（）在此方法中执行任何必要的清理，例如使计时器无效，取消网络请求或清除在componentDidMount（）中创建的任何订阅。

• componentDidCatch()

在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。

import React from 'react'
import ReactDOM from 'react-dom';

class SubCounter extends React.Component {
    // 在17版本将要废弃，还是不用较好
    componentWillReceiveProps() {
        console.log('9、子组件将要接收到新属性');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('10、子组件是否需要更新');
        if (newProps.number < 5) return true;
        return false
    }

    // 同17版本将要废弃
    componentWillUpdate() {
        console.log('11、子组件将要更新');
    }

    componentDidUpdate() {
        console.log('13、子组件更新完成');
    }

    componentWillUnmount() {
        console.log('14、子组件将卸载');
    }

    render() {
        console.log('12、子组件挂载中');
        return (
                <p>{this.props.number}</p>
        )
    }
}


// 父组件
class Counter extends React.Component {
    static defaultProps = {
        //1、加载默认属性
        name: 'sls',
        age:23
    };

    constructor() {
        super();
        //2、加载默认状态
        this.state = {number: 0}
    }


    // 新版本已经废弃
    componentWillMount() {
        console.log('3、父组件挂载之前');
    }

    componentDidMount() {
        console.log('5、父组件挂载完成');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('6、父组件是否需要更新');
        if (newState.number<15) return true;
        return false
    }


    // 新版本已经废弃
    componentWillUpdate() {
        console.log('7、父组件将要更新');
    }

    componentDidUpdate() {
        console.log('8、父组件更新完成');
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log('4、render(父组件挂载)');
        return (
            <div>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
                {this.state.number<10?<SubCounter number={this.state.number}/>:null}
            </div>
        )
    }
}
ReactDOM.render(<Counter/>, document.getElementById('root'));

最后附上生命周期图示

image.png image.png

参考链接
React生命周期