Question

This article说：小心JSX中的对象文字

一旦你的组件变得更“纯粹”，你就会开始检测到不好导致无用的重新渲染的模式。最常见的是用法 JSX中的对象文字，我喜欢称之为“臭名昭着的{{”。让我举个例子：

import React from 'react'; 
import MyTableComponent from './MyTableComponent';

const Datagrid = (props) => (
     <MyTableComponent style={{ marginTop: 10 }}>
         ...
     </MyTableComponent> 
 )

每次组件时，组件的样式prop都会获得一个新值渲染。因此即使是纯粹的，它也会被渲染每次都呈现。事实上，每次你通过对象文字作为子组件的支柱，你打破纯度。该解决方案很简单：

import React from 'react'; 
import MyTableComponent from  './MyTableComponent';

const tableStyle = { marginTop: 10 }; 

const Datagrid = (props) => (
     <MyTableComponent style={tableStyle}>
         ...
     </MyTableComponent> 
)

这看起来非常基本，但我已经多次见过这个错误了，我已经＆gt;培养了一种检测能力臭名昭着{{在JSX。我经常用常量替换它。

所以我的问题是，是否有任何规则阻止在jsx中使用对象文字？

我试图找到一个，但还没有结果。

Answer 1

修改

我在本文下面的https://github.com/cvazac/eslint-plugin-react-perf one comment找到了这个插件React.js pure render performance anti-pattern：{/ 3}}。

此插件提供以下规则：

react-perf/jsx-no-new-object-as-prop：防止{...}作为JSX道具值

react-perf/jsx-no-new-array-as-prop：防止[...]作为JSX道具值

react-perf/jsx-no-new-function-as-prop：防止函数为JSX prop值

react-perf/jsx-no-jsx-as-prop：防止JSX成为JSX prop值

我认为这正是你所需要的。

根据我对https://github.com/yannickcr/eslint-plugin-react的快速查看，我找不到与此问题相关的任何规则。我认为这是拉动请求的好时机！

现在您可以使用jsx-no-bind规则来检查在每个render上创建的额外功能，因此，由于此规则，您还可以阻止组件中的额外渲染。

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

ESLint规则禁止JSX中的对象文字

1 个答案: