在使用内联函数后，render方法每次运行时都会创建该函数的新实例（函数是引用类型，比较内存地址是否相等，新实例内存地址肯定不一样），

导致React在进行 Virtual DOM对比时，新旧函数比对不相等，

导致 React 总是为元素绑定新的函数实例，而旧的函数实列又要交给垃圾回收器处理。

错误代码：

import React, { Component } from 'react'

export default class App extends Component {
constructor() {
super()
this.state = {
inputValue: "1"
}
}
render() {
console.log('render')
return (
<div>
<input value={this.state.inputValue} onChange={e => {this.setState({inputValue: e.target.value})}} />
</div>
)
}
}

正确代码：

注意：这是类实列，函数式组件可以用 useFunction hooks

...
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            inputValue: "1"
        }
    }
    // 这么写可以不用.bind改变this指向
    // setVal = (e) => {
    //     this.setState({inputValue: e.target.value})
    // }
    setVal(e) {
        this.setState({inputValue: e.target.value})
    }
    render() {
        console.log('render')
        return (
        <div>
            <input value={this.state.inputValue} onChange={this.setVal.bind(this)} />
        </div>
        )
    }
}
...

以上就是react不要使用内联函数定义全部内容,感谢大家支持自学php网。