---
url: /docs/guide/usage/linter/rules/react/jsx-no-constructed-context-values.md
---

### 它的作用

禁止使用会导致不必要重新渲染的 JSX context provider value。

### 为什么这不好？

React Context 及其所有子节点和 Consumers 会在 value prop 变化时重新渲染。由于每个 JavaScript 对象都具有自己的标识，像对象表达式（`{foo: 'bar'}`）或函数表达式之类的内容在每次渲染时都会获得新的标识。这会让 context 认为它收到了一个新对象，并可能导致不必要的重新渲染和意外后果。

这可能会带来很大的性能损耗，因为它不仅会导致 context providers 和 consumers 以及其子树中的所有元素重新渲染，React 在渲染 provider 并查找 consumers 时进行的树扫描处理也会被浪费。

### 示例

以下是此规则的**错误**代码示例：

```jsx
return <SomeContext.Provider value={{ foo: "bar" }}>...</SomeContext.Provider>;
```

```jsx
function Component() {
  function foo() {}
  return <MyContext.Provider value={foo} />;
}
```

以下是此规则的**正确**代码示例：

```jsx
const foo = useMemo(() => ({ foo: "bar" }), []);
return <SomeContext.Provider value={foo}>...</SomeContext.Provider>;
```

```jsx
const MyContext = createContext();
const Component = () => <MyContext.Provider value="Some string" />;
```

## 如何使用

## 版本

此规则在 v1.48.0 中添加。

## 参考资料