class Comp extends Component {
...
inputChangeHandler() {
//...
}
render() {
return <input onChange={this.inputChangeHandler.bind(this)}/>
}
}
按照官方的说法,这样写每次重新渲染的时候,都会创建一个新的对象,如果组件大量复用,性能会下降。不适用unsafe方法的情况下,如何给处理onChange能保证性能?
###重复渲染重复创建的时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}/>
}
}
###使用hooks可以轻松解决你的问题。
function Comp() {
...
cosnt inputChangeHandler = useCallback(() {
//...
}, [])
render() {
return <input onChange={inputChangeHandler}/>
}
}
###像上面说的在构造函数里绑定,或者用箭头函数
class Comp extends Component {
...
inputChangeHandler = () => {
//...
}
render() {
return <input onChange={this.inputChangeHandler}/>
}
}