React：上下文提供者何时更新其消费者？

Question

To my understanding, React's Context Provider updates its Consumers whenever the context value changes.

From the Docs :

All consumers that are descendants of a Provider will re-render whenever the Provider's value prop changes. The propagation from Provider to its descendant consumers is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component bails out of the update.

Changes are determined by comparing the new and old values using the same algorithm as Object.is .

However, the following code seems to indicate the opposite:

 var themes = { light: { name: "Light", foreground: "#000000", background: "#eeeeee" }, dark: { name: "Dark", foreground: "#ffffff", background: "#222222" } }; const ThemeContext = React.createContext({ theme: themes.light, updateTheme: () => {} }); let prevTheme = undefined; function App() { console.log("RE-RENDERING App..."); const stateArray = React.useState(themes.light); const [theme, setTheme] = stateArray; const [otherState, setOtherState] = React.useState(true); function handleSetOtherState() { console.log("SETTING OTHER STATE....."); setOtherState(prevState => !prevState); } console.log("theme:", theme); console.log("prevTheme:", prevTheme); console.log(`Object.is(prevTheme, theme): ${Object.is(prevTheme, theme)}`); prevTheme = theme; return ( <ThemeContext.Provider value={stateArray}> <Toolbar /> <button onClick={handleSetOtherState}>Change OtherState</button> </ThemeContext.Provider> ); } class Toolbar extends React.PureComponent { render() { console.log("RE-RENDERING Toolbar (DOES NOT HAPPEN WHEN CHANGING OTHERSTATE)..."); return ( <div> <ThemedButton /> </div> ); } } function ThemedButton() { console.log("RE-RENDERING ThemedButton (SHOULD NOT HAPPEN WHEN CHANGING OTHERSTATE)..."); const themeContext = React.useContext(ThemeContext); const [theme, setTheme] = themeContext; console.log("themeContext:", themeContext); console.log("theme.name:", theme.name); console.log("setTheme:", setTheme); function handleToggleTheme() { console.log("SETTING THEME STATE....."); setTheme( prevState => themes.dark ); } return <button onClick={handleToggleTheme}>Click me: {theme.name}</button>; } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="root"/>

As seen, when clicking Change OtherState :

1. The parent component enclosing the context Provider will re-render, thus allowing the Provider to see that there has indeed not been any change to the context value
2. The children will re-render because their parent did, but that process is stopped mid-ways in the process by Toolbox being a PureComponent
3. Now, the whole idea of the context Provider , is that it should only update its Consumers if the context value changed
4. The change check is done with Object.is , as specified in the Docs (see above)
5. Regardless of that fact, the Consumer ( ThemedButton ) still updates when OtherState changes
6. That should not happen, because the context value did in fact not change, and the child re-rendering is stopped in the middle with PureComponent
7. Only when the context value changes should the Consumers update, even if the re-rendering is stopped in intermediate components with PureComponent

PS: You can see that context value does not change when Change OtherState is clicked, by looking at the Object.is console log.

Question

Why does ThemedButton re-render, when the context value did not change?

Answer 1

useState returns a new array every call. So you pass a new array to context every render. useMemo to fix the issue.

 var themes = { light: { name: "Light", foreground: "#000000", background: "#eeeeee" }, dark: { name: "Dark", foreground: "#ffffff", background: "#222222" } }; const ThemeContext = React.createContext({ theme: themes.light, updateTheme: () => {} }); let prevTheme = undefined; let prevStateArray = undefined; function App() { console.log("RE-RENDERING App..."); const stateArray = React.useState(themes.light); console.log('stateArray', prevStateArray, stateArray, Object.is(prevStateArray, stateArray)); prevStateArray = stateArray; const [theme, setTheme] = stateArray; const memoState = React.useMemo(() => [theme, setTheme], [theme, setTheme]); const [otherState, setOtherState] = React.useState(true); function handleSetOtherState() { console.log("SETTING OTHER STATE....."); setOtherState(prevState => !prevState); } console.log("theme:", theme); console.log("prevTheme:", prevTheme); console.log(`Object.is(prevTheme, theme): ${Object.is(prevTheme, theme)}`); prevTheme = theme; return ( <ThemeContext.Provider value={memoState}> <Toolbar /> <button onClick={handleSetOtherState}>Change OtherState</button> </ThemeContext.Provider> ); } class Toolbar extends React.PureComponent { render() { console.log("RE-RENDERING Toolbar (DOES NOT HAPPEN WHEN CHANGING OTHERSTATE)..."); return ( <div> <ThemedButton /> </div> ); } } function ThemedButton() { console.log("RE-RENDERING ThemedButton (SHOULD NOT HAPPEN WHEN CHANGING OTHERSTATE)..."); const themeContext = React.useContext(ThemeContext); const [theme, setTheme] = themeContext; console.log("themeContext:", themeContext); console.log("theme.name:", theme.name); console.log("setTheme:", setTheme); function handleToggleTheme() { console.log("SETTING THEME STATE....."); setTheme( prevState => themes.dark ); } return <button onClick={handleToggleTheme}>Click me: {theme.name}</button>; } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="root"/>