Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React:render何时被调用 #55

Open
HCLacids opened this issue Mar 8, 2022 · 2 comments
Open

React:render何时被调用 #55

HCLacids opened this issue Mar 8, 2022 · 2 comments
Labels

Comments

@HCLacids
Copy link
Owner

HCLacids commented Mar 8, 2022

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

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

@HCLacids HCLacids added the React label Mar 8, 2022
@HCLacids
Copy link
Owner Author

HCLacids commented Mar 8, 2022

参考链接
当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 HCLacids changed the title React:render合适被调用 React:render何时被调用 Mar 8, 2022
@HCLacids
Copy link
Owner Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant