面试题：React.createContext默认值更新与性能优化

确保相关组件正确更新：

当React.createContext的默认值发生变化时，使用该上下文的组件会重新渲染，前提是组件通过Context.Consumer或useContext来订阅上下文。
示例代码：

import React, { createContext, useState } from'react';

const MyContext = createContext({ value: 'default' });

const ChildComponent = () => {
  const context = React.useContext(MyContext);
  return <div>{context.value}</div>;
};

const ParentComponent = () => {
  const [newValue, setNewValue] = useState('default');
  const handleClick = () => {
    setNewValue('new value');
  };
  return (
    <MyContext.Provider value={{ value: newValue }}>
      <ChildComponent />
      <button onClick={handleClick}>Change Context Value</button>
    </MyContext.Provider>
  );
};

export default ParentComponent;

在上述代码中，ParentComponent通过MyContext.Provider提供上下文，ChildComponent使用useContext订阅上下文。当点击按钮改变newValue时，ChildComponent会重新渲染以显示新的上下文值。

避免不必要的渲染以优化性能：

使用React.memo：

对于函数式组件，可以使用React.memo包裹，它会对组件的props进行浅比较，如果props没有变化，组件不会重新渲染。对于使用上下文的组件，如果上下文值是稳定的（在短时间内不会频繁变化），React.memo可以有效避免不必要的渲染。
示例：

import React, { createContext, useState } from'react';

const MyContext = createContext({ value: 'default' });

const ChildComponent = React.memo(() => {
  const context = React.useContext(MyContext);
  return <div>{context.value}</div>;
});

const ParentComponent = () => {
  const [newValue, setNewValue] = useState('default');
  const handleClick = () => {
    setNewValue('new value');
  };
  return (
    <MyContext.Provider value={{ value: newValue }}>
      <ChildComponent />
      <button onClick={handleClick}>Change Context Value</button>
    </MyContext.Provider>
  );
};

export default ParentComponent;

使用useMemo优化上下文值：

如果上下文值是一个对象或函数等引用类型，并且在每次渲染时都会重新创建，这会导致依赖该上下文的组件不必要的重新渲染。可以使用useMemo来缓存上下文值，只有当依赖项变化时才重新计算。
示例：

import React, { createContext, useState, useMemo } from'react';

const MyContext = createContext({ value: 'default' });

const ChildComponent = () => {
  const context = React.useContext(MyContext);
  return <div>{context.value}</div>;
};

const ParentComponent = () => {
  const [newValue, setNewValue] = useState('default');
  const handleClick = () => {
    setNewValue('new value');
  };
  const contextValue = useMemo(() => ({ value: newValue }), [newValue]);
  return (
    <MyContext.Provider value={contextValue}>
      <ChildComponent />
      <button onClick={handleClick}>Change Context Value</button>
    </MyContext.Provider>
  );
};

export default ParentComponent;

在这个例子中，useMemo确保只有newValue变化时，contextValue才会重新计算，从而避免了因上下文对象引用变化导致的不必要渲染。

星途面试题库

面试题：React.createContext默认值更新与性能优化

知识考点

面试题答案