欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react 函数组件和类组件的区别

程序员文章站 2022-06-15 18:41:24
...

react 函数组件和类组件的区别

一、react类组件和函数式组件重新渲染时的区别

  1. 看现象
    1.1代码

类组件:


    // 1、类组件
    class ComClass extends React.Component {
        constructor(props) {
            super();
            this.props = props;
            console.log("类组件的构造函数被调用了");
        }render() {
            console.log("类组件的render被调用了");
            return (
            <div style={{ "backgroundColor": "pink" }}>
                    <h5 >我是类组件</h5>
                    <p>{this.props.name}</p>
                </div>
            );
        }
    }

函数式组件:

    // 2、函数式组件
    function ComFn(props) {
        console.log("函数式组件的函数被调用了");
        return (                
            <div style={{ "backgroundColor": "skyblue" }}>
                <h5 >我是函数式组件</h5>
                <p>{props.name}</p>
            </div>
        );
    }

使用组件

    let name = "张三疯";
    function changeName() {
        name = "张四疯"
        renderDom();
    }function renderDom() {
        ReactDOM.render(
            <div>
                <button onClick={changeName} >修改</button>
                <ComClass name={name} /><br />
                <ComFn name={name} />
            </div>, document.getElementById("box"));
    }renderDom();

1.2运行

初次运行时,我们发现在控制台中打印的内容为:

类组件的构造函数被调用了
类组件的render被调用了
函数式组件的函数被调用了

当点击“修改”按钮时,我们发现控制台中打印的内容为:

类组件的render被调用了
函数式组件的函数被调用了

1.3 总结

1.3.1、类组件重新渲染时,只调用了render

1.3.2、函数式组件重新渲染时,会调用函数整个本身(哈哈,不调用它也不行啊)

原文