为什么要避免在 React 的 Render 方法中使用绑定或内联箭头函数？

避免在渲染方法中绑定或内联箭头函数

简介

绑定函数或使用React 中不鼓励渲染方法中的内联箭头函数，因为它可能会在渲染过程中产生性能问题渲染。本文探讨了这种做法的替代方案，并提供了它们的实现示例。

渲染中绑定的问题

在渲染中绑定函数或使用内联箭头函数时，一个新的该函数的实例是在每个渲染周期中创建的。这可能会导致性能下降，尤其是在频繁重新渲染的情况下。

绑定的替代方案

• 使用组件构造函数：

  • 绑定函数构造函数在渲染期间重用同一个实例。

• 使用属性初始化语法：

  • 在类主体并使用箭头函数将其分配给属性

场景：传递额外参数

考虑将额外参数传递给映射函数中的事件处理程序的情况。例如，考虑从待办事项列表中删除一项：

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)

解决方案：子组件

要避免绑定，请为映射内容创建一个子组件：

家长组件：

deleteTodo = (val) => {
    console.log(val)
}
todos.map(el => 
    <MyComponent val={el} onClick={this.deleteTodo}/> 

)

子组件（MyComponent）：

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

在这种方法中，事件处理函数驻留在子组件中，传递期间表现更好渲染。

示例：

这是一个演示子组件方法的完整示例：

class Parent extends React.Component {
     _deleteTodo = (val) => {
        console.log(val)
    }
    render() {
        var todos = ['a', 'b', 'c'];
        return (
           <div>{todos.map(el => 
             <MyComponent key={el} val={el} onClick={this._deleteTodo}/> 
        
           )}</div>
        )
    }
    
   
}

class MyComponent extends React.Component {
        _deleteTodo = () => {
                     console.log('here');   this.props.onClick(this.props.val);
        }
        render() {
           return <div onClick={this._deleteTodo}> {this.props.val} </div>
        }
    }
    
ReactDOM.render(<Parent/>, document.getElementById('app'));

以上是为什么要避免在 React 的 Render 方法中使用绑定或内联箭头函数？的详细内容。更多信息请关注PHP中文网其他相关文章！