为什么 JSX 道具不应该使用箭头函数或绑定？

小开

最佳答案

为什么不应该在 JSX 道具中使用内联箭头函数

在 JSX 中使用箭头函数或绑定是一种损害性能的糟糕做法，因为函数是在每次呈现时重新创建的。

无论何时创建一个函数，前一个函数都会被垃圾收集。重新呈现许多元素可能会在动画中产生 jank。
使用内联箭头函数将导致 PureComponent和 shouldComponentUpdate方法中使用 shallowCompare的组件重新呈现。由于每次都会重新创建箭头函数道具，因此浅表比较将把它标识为道具的更改，并且组件将重新呈现。

正如你可以在下面的两个例子中看到的-当我们使用内联箭头函数时，<Button>组件每次都会重新渲染(控制台显示“渲染按钮”文本)。

示例1-PureComponent 没有内联处理程序

class Button extends React.PureComponent {
render() {
const { onClick } = this.props;
    

console.log('render button');
    

return (
<button onClick={ onClick }>Click</button>
);
}
}


class Parent extends React.Component {
state = {
counter: 0
}
  

onClick = () => this.setState((prevState) => ({
counter: prevState.counter + 1
}));
  

render() {
const { counter } = this.state;
    

return (
<div>
<Button onClick={ this.onClick } />
<div>{ counter }</div>
</div>
);
}
}


ReactDOM.render(
<Parent />,
document.getElementById('root')
);

<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"></div>

示例2-PureComponent 和内联处理程序

class Button extends React.PureComponent {
render() {
const { onClick } = this.props;
    

console.log('render button');
    

return (
<button onClick={ onClick }>Click</button>
);
}
}


class Parent extends React.Component {
state = {
counter: 0
}
  

render() {
const { counter } = this.state;
    

return (
<div>
<Button onClick={ () => this.setState((prevState) => ({
counter: prevState.counter + 1
})) } />
<div>{ counter }</div>
</div>
);
}
}


ReactDOM.render(
<Parent />,
document.getElementById('root')
);

<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"></div>

不使用内联箭头函数绑定到 this的方法

在构造函数中手动绑定方法:

class Button extends React.Component {
constructor(props, context) {
super(props, context);


this.cb = this.cb.bind(this);
}


cb() {


}


render() {
return (
<button onClick={ this.cb }>Click</button>
);
}
}

Binding a method using the proposal-class-fields with an arrow function. As this is a stage 3 proposal, you'll need to add the Stage 3 preset or the Class properties transform to your babel configuration.

class Button extends React.Component {
cb = () => { // the class property is initialized with an arrow function that binds this to the class


}


render() {
return (
<button onClick={ this.cb }>Click</button>
);
}
}

Function Components with inner callbacks

When we create an inner function (event handler for example) inside a function component, the function will be recreated every time the component is rendered. If the function is passed as props (or via context) to a child component (Button in this case), that child will re-render as well.

Example 1 - Function Component with an inner callback:

const { memo, useState } = React;


const Button = memo(({ onClick }) => console.log('render button') || (
<button onClick={onClick}>Click</button>
));


const Parent = () => {
const [counter, setCounter] = useState(0);
  

const increment = () => setCounter(counter => counter + 1); // the function is recreated all the time
  

return (
<div>
<Button onClick={increment} />
      

<div>{counter}</div>
</div>
);
}


ReactDOM.render(
<Parent />,
document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="root"></div>

为了解决这个问题，我们可以用 useCallback()钩子包装回调函数，并将依赖项设置为空数组。

注意: useState生成的函数接受一个 updater 函数，该函数提供当前状态。通过这种方式，我们不需要将当前状态设置为 useCallback的依赖项。

示例2-使用 useCallback 包装的内部回调函数组件:

const { memo, useState, useCallback } = React;


const Button = memo(({ onClick }) => console.log('render button') || (
<button onClick={onClick}>Click</button>
));


const Parent = () => {
const [counter, setCounter] = useState(0);
  

const increment = useCallback(() => setCounter(counter => counter + 1), []);
  

return (
<div>
<Button onClick={increment} />
      

<div>{counter}</div>
</div>
);
}


ReactDOM.render(
<Parent />,
document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="root"></div>

小开

这是因为如果在 JSX 属性中使用，箭头函数显然会在每次呈现时创建函数的新实例。这可能会对垃圾收集器造成巨大的压力，也会阻碍浏览器优化任何“热路径”，因为函数将被丢弃而不是重用。

你可以在 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md上看到整个解释和更多的信息

小开

为了避免创建具有相同参数的新函数，您可以制表函数绑定结果，这里有一个名为 memobind的简单实用程序: https://github.com/supnate/memobind

小开

像这样使用内联函数是完全可以的，但是 linting 规则已经过时了。

这条规则来自于箭头函数不常用的时代。捆绑(这个) ，过去是很慢的。Chrome 49的性能问题已经解决了。

请注意，不要将内联函数作为道具传递给子组件。

《反应路由器》(React Router)一书的作者瑞安•弗洛伦斯(Ryan Florence)就此写了一篇很棒的文章:

Https://reacttraining.com/blog/react-inline-functions-and-performance/

小开

您可以使用反应-缓存-处理程序库中的箭头函数，无需担心重新呈现性能:

注意: 它在内部按指定的键缓存你的箭头函数, 无需担心重新渲染！

render() {
return (
<div>
{this.props.photos.map((photo) => (
<Photo
key={photo.url}
onClick={this.handler(photo.url, (url) => {
console.log(url);
})}
/>
))}
</div>
);
}

其他特点:

有名字的联络人
用箭头函数处理事件
对密钥、自定义参数和原始事件的访问
组件呈现性能
处理程序的自定义上下文

小开