美文网首页React.js
一起学React--元素渲染和生命周期

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

作者: 一本正经的反派 | 来源:发表于2019-03-10 23:26 被阅读7次

    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生命周期

    相关文章

      网友评论

        本文标题:一起学React--元素渲染和生命周期

        本文链接:https://www.haomeiwen.com/subject/wftmpqtx.html