重新渲染的起因：
- 组件的state变化
- 父组件重新渲染
- 组件使用context，provider的value发生变化时
子组件使用useContext导致的重渲染
// value是个复杂类型的对象，父组件的重渲染会导致重新生成{mode}
const ThemeContext = React.createContext<Theme>({ mode: 'light' });
const useTheme = () => {
return useContext(ThemeContext);
};
// before:
// 父组件
const [mode, setMode] = useState<Mode>("light");
return (
<ThemeContext.Provider value={{ mode }}>
// 这里有个计数器点击+1
// 这里有个按钮可以切换主题模式
</ThemeContext.Provider>
);
const Item = ({ country }: { country: Country }) => {
// 父组件计数器+1，这里每次会是个新对象，导致重渲染
const { mode } = useTheme();
const className = `country-item ${mode === "dark" ? "dark" : ""}`;
// the rest is the same
}
// after:
const [mode, setMode] = useState<Mode>("light");
// memoising the object! 缓存对象
const theme = useMemo(() => ({ mode }), [mode]);
return (
<ThemeContext.Provider value={theme}>
<button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>Toggle theme</button>
// 这里有个计数器，可以点击+1
// 这里有个按钮可以切换主题模式
</ThemeContext.Provider>
)
// 子组件
const Item = ({ country }: { country: Country }) => {
// 父组件计数器+1，这里每次是个同一个对象，不会重渲染
// 切换主题会导致子组件重新渲染
const { mode } = useTheme();
const className = `country-item ${mode === "dark" ? "dark" : ""}`;
// the rest is the same
}
React.memo，将组件缓存
// 只要props中的属性（a，或者其他更多的参数）没有变化，MovingComponent 的重渲染不会导致ChildComponent 的重渲染
// 如果props中有函数参数，在父组件中应使用useCallback包裹，以保持父组件每次重渲染时，传递给子组件的函数引用地址一致
const ChildComponent = (props) {
...
return (
<div onClick={props.onClick}>{props.a}</div>
)
}
export default React.memo(ChildComponent)
const MovingComponent = () => {
const [state, setState] = useState({ x: 100, y: 100 });
const onClick = useCallback(() => {
console.log('xxx')
}, [])
return (
<div
onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })}
style={{ left: state.x, top: state.y }}
>
// MovingComponent的重渲染不会导致ChildComponent 的重渲染
<ChildComponent a={111} onClick={onClick} />
</div>
);
};
抽离为children，以避免重渲染
# 鼠标移动后，MovingComponent 会重渲染，导致子组件ChildComponent 重渲染，如果后者很“重”，将导致性能问题
const MovingComponent = () => {
const [state, setState] = useState({ x: 100, y: 100 });
return (
<div
// when the mouse moves inside this component, update the state
onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })}
// use this state right away - the component will follow mouse movements
style={{ left: state.x, top: state.y }}
>
<ChildComponent />
</div>
);
};
// ChildComponent 通过children 传递，MovingComponent 的重渲染不会导致ChildComponent 重渲染，因为ChildComponent 隶属于组件SomeOutsideComponent，组件作为children传递不会重渲染，因为它是props，它在SomeOutsideComponent 组件中已经创建完毕，已经调用过React.createElement了
const MovingComponent = ({ children }) => {
const [state, setState] = useState({ x: 100, y: 100 });
return (
<div onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })} style={{ left: state.x, top: state.y }}>
// children now will not be re-rendered
{children}
</div>
);
};
const SomeOutsideComponent = () => {
return (
<MovingComponent>
<ChildComponent />
</MovingComponent>
);
};
Mystery 1: why components that are passed as props don’t re-render?
为什么通过props传递一个组件，父组件重渲染不会使该组件重渲染？
Answer 1： “children” is a <ChildComponent /> element that is created in SomeOutsideComponent. When MovingComponent re-renders because of its state change, its props stay the same. Therefore any Element (i.e. definition object) that comes from props won’t be re-created, and therefore re-renders of those components won’t happen.
Mystery 2: if children are passed as a render function, they start re-rendering. Why?
为什么将props.children通过一个函数传递，会导致重渲染？
const MovingComponent = ({ children }) => {
// this will trigger re-render
const [state, setState] = useState();
return (
<div ///...
>
<!-- those will re-render because of the state change -->
{children()}
</div>
);
};
const SomeOutsideComponent = () => {
return (
<MovingComponent>
{() => <ChildComponent />}
</MovingComponent>
)
}
Answer 2：In this case “children” are a function, and the Element (definition object) is the result of calling this function. We call this function inside MovingComponent, i.e. we will call it on every re-render. Therefore on every re-render, we will re-create the definition object <ChildComponent />, which as a result will trigger ChildComponent’s re-render.
Mystery 3: MovingComponentMemo使用memo，为什么没有阻止由于SomeOutsideComponent 重渲染导致ChildComponent 的重渲染
// wrapping MovingComponent in memo to prevent it from re-rendering
const MovingComponentMemo = React.memo(MovingComponent);
const SomeOutsideComponent = () => {
// trigger re-renders here with state
const [state, setState] = useState();
return (
<MovingComponentMemo>
<!-- ChildComponent will re-render when SomeOutsideComponent re-renders -->
<ChildComponent />
</MovingComponentMemo>
)
}
const MovingComponent = ({children}) => <>{children}</>
Answer 3：因为SomeOutsideComponent 的每次重渲染都重新创建了ChildComponent （是个对象），MovingComponentMemo会检查props是否变动，即检查props.children，因为ChildComponent 是重新生成的，与之前的不相等（2个对象的地址不相等），所以会触发重渲染；如果将ChildComponent 使用memo包裹，则MovingComponent的重渲染不会导致ChildComponent 重渲染，因为MovingComponent检查发现这个props与之前的相等
Mystery 4: when passing children as a function, why memoizing this function doesn’t work?
将Mystery 2中的函数使用useCallback包裹，还是阻止不了重渲染？
const SomeOutsideComponent = () => {
// trigger re-renders here with state
const [state, setState] = useState();
// this memoization doesn't prevent re-renders of ChildComponent
const child = useCallback(() => <ChildComponent />, []);
return <MovingComponent>{child}</MovingComponent>;
};
const MovingComponent = ({ children }) => {
// this will trigger re-render
const [state, setState] = useState();
return (
<div ///...
>
<!-- those will re-render because of the state change -->
{children()}
</div>
);
};
child函数被记忆，但是它的返回结果（<ChildComponent />）没有被记忆，同一个函数每次都会执行React.createElement，即重渲染
参考
https://www.developerway.com/posts/react-elements-children-parents
网友评论