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

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、函数式组件重新渲染时，会调用函数整个本身（哈哈，不调用它也不行啊）

原文