Why shouldn't JSX props use arrow functions or bind?

前端未结

关注

 6  1349

孤独总比滥情好 2020-11-22 13:07

I\'m running lint with my React app, and I receive this error:

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

6条回答

天涯浪人 (楼主)

2020-11-22 13:26
Why you shouldn't use inline arrow functions in JSX props

Using arrow functions or binding in JSX is a bad practice that hurts performance, because the function is recreated on each render.
1. Whenever a function is created, the previous function is garbage collected. Rerendering many elements might create jank in animations.
2. Using an inline arrow function will cause PureComponents, and components that use shallowCompare in the shouldComponentUpdate method to rerender anyway. Since the arrow function prop is recreated each time, the shallow compare will identify it as a change to a prop, and the component will rerender.
As you can see in the following 2 examples - when we use inline arrow function, the ); } } class Parent extends React.Component { state = { counter: 0 } onClick = () => this.setState((prevState) => ({ counter: prevState.counter + 1 })); render() { const { counter } = this.state; return (
); } } ReactDOM.render( , document.getElementById('root') );

Example 2 - PureComponent with inline handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    
    console.log('render button');
    
    return (
      
    );
  }
}

class Parent extends React.Component {
  state = {
    counter: 0
  }
  
  render() {
    const { counter } = this.state;
    
    return (
      
        
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

Binding methods to this without inlining arrow functions

Binding the method manually in the constructor:

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

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

  cb() {

  }

  render() {
    return (
      
    );
  }
}

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 (
      
    );
  }
}

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') || (
  
));

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = () => setCounter(counter => counter + 1); // the function is recreated all the time
  
  return (
    
      
  );
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

To solve this problem, we can wrap the callback with the useCallback() hook, and set the dependencies to an empty array.

Note: the useState generated function accepts an updater function, that provides the current state. In this way, we don't need to set the current state a dependency of useCallback.

Example 2 - Function Component with an inner callback wrapped with useCallback:

const { memo, useState, useCallback } = React;

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

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = useCallback(() => setCounter(counter => counter + 1), []);
  
  return (
    
      
  );
}

ReactDOM.render(
  ,
  document.getElementById('root')
);