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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在用我的React应用程序运行lint，并且收到此错误：

error    JSX props should not use arrow functions        react/jsx-no-bind

这是我运行箭头功能（在里面onClick）的地方：

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

是否应避免这种不良做法？最好的方法是什么？

回答：

在JSX中使用箭头函数或绑定是不利于性能的不良做法，因为该函数会在每个渲染器上重新创建。

  1. 每当创建一个函数时，就会对前一个函数进行垃圾回收。渲染许多元素可能会在动画中产生垃圾。

  2. 使用内联箭头功能将导致PureComponents和shallowCompare该shouldComponentUpdate方法中使用的组件重新渲染。由于箭头函数prop每次都会重新创建，因此浅表比较会将其标识为对prop的更改，并且组件将重新呈现。

在下面的两个示例中可以看到-当我们使用嵌入式箭头功能时，<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>

  1. 在构造函数中手动绑定方法：

    class Button extends React.Component {

    constructor(props, context) {

    super(props, context);

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

    }

    cb() {

    }

    render() {

    return (

    );

    }

    }

  2. 使用带有箭头功能的proposal-class-fields绑定方法。由于这是第3阶段的建议，因此您需要添加第3阶段的预设或将Class属性转换为babel配置。

    class Button extends React.Component {

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

    }

    render() {

    return (

    );

    }

    }

回答：

当我们在函数组件内部创建内部函数（例如事件处理程序）时，每次渲染组件时都会重新创建该函数。如果将函数作为道具（或通过上下文）传递给子组件（Button在这种情况下），则该子组件也会重新渲染。

示例1-具有内部回调的功能组件：

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()hook来包装回调，并将依赖项设置为一个空数组。

在useState生成函数接受更新器功能，其提供当前状态。这样，我们无需将当前状态设置为的依赖项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道具不应该使用箭头功能或绑定？ 的全部内容， 来源链接： utcz.com/qa/424867.html

回到顶部