react onChange如何优化

Question

class Comp extends Component {
    ...
    inputChangeHandler() {
        //...
    }
    
    render() {
        return <input onChange={this.inputChangeHandler.bind(this)}/>
    }
}

按照官方的说法，这样写每次重新渲染的时候，都会创建一个新的对象，如果组件大量复用，性能会下降。不适用unsafe方法的情况下，如何给处理onChange能保证性能？

Answer 1

重复渲染重复创建的时onChange绑定的回调函数

class Comp extends Component {
    ...
    constructor(props) {
        super(props);
        this.setTextInputRef = element => {
           this.textInput = element;
        };
        this.inputChangeHandler =this.inputChangeHandler.bind(this);  
    }
    inputChangeHandler() {
        //...
        //
        let newValue = this.textInput.value();
    }
    
    render() {
        return <input ref={this.setTextInputRef} onChange={this.inputChangeHandler}/>
    }
}

也可以 从事件的event的参数中读取值

class Comp extends Component {
    ...
    constructor(props) {
        super(props);
    }
    inputChangeHandler(event) {
        //...
        //
        console.log(event);
    }
    
    render() {
        return <input onChange={this.inputChangeHandler}/>
    }
}

Answer 2

使用hooks可以轻松解决你的问题。

function Comp() {
    ...
    cosnt inputChangeHandler = useCallback(() {
        //...
    }, [])
    
    render() {
        return <input onChange={inputChangeHandler}/>
    }
}

Answer 3

像上面说的在构造函数里绑定，或者用箭头函数

class Comp extends Component {
    ...
    inputChangeHandler = () => {
        //...
    }
    
    render() {
        return <input onChange={this.inputChangeHandler}/>
    }
}