React：render何时被调用

HCLacids commented 2 years ago

参考链接类组件和函数组件有所不同类组件是使用setState方法时，都会再次调用render进行重新渲染。函数组件在useState时，会检查是否改变值，当state或者props改变时，会调用render。父组件进行渲染，子组件一定渲染。（useMemo或者memo感觉可以解决？）不太懂链接总结里面

组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state

HCLacids commented 2 years ago

参考链接当props来自外部（全局），props改变时，不会造成render的调用

import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';

const obj = {
    message: 'hello world',
};

class App extends React.Component {
    handleClick() {
        console.log('click happen');
        obj.message = 'hello Beijing';
    }

    render() {
        return (
            <Fragment>
                <button onClick={ this.handleClick }>Click</button>
                <Component1 objMessage={ obj } />
            </Fragment>
        );
    }
}

class Component1 extends React.Component {
    render() {
        const { objMessage } = this.props;
        console.log('Component1 render');
        return (
            <div>{ objMessage.message }</div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

HCLacids commented 9 months ago

无语上面例子props的例子因为点击父组件没有发生改变，不会rerender。props也是浅比较，应用地址没有改变。

HCLacids / resume

React：render何时被调用 #55