react-native - React Native Inline 函数理解

Question

下面是来自一个简单的 React Native 类组件的 2 种代码模式。这些有什么性能差异吗？不同之处在于调用 native 控件事件的函数的方式。如果存在性能差异，我想知道如何检查和验证实际上是否存在性能差异。
模式 1:-

class MyClass extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
        }
    }

    onNameChange = (text) => {
        this.setState({ name: text });
    }

    render() {
        const { name } = this.state;
        return (
            <TextInput onChangeText={this.onNameChange} value={name} />
        )
    }
}

模式2:-

class MyClass extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
        }
    }

    onNameChange = (text) => {
        this.setState({ name: text });
    }

    render() {
        const { name } = this.state;
        return (
            <TextInput onChangeText={(text) => {
                this.onNameChange(text);
            }} value={name} />
        )
    }
}

如果存在性能差异，那么我需要采用第一种模式。

Answer 1

箭头函数每次返回一个新函数。这导致 React 认为我们的观点发生了一些变化，而实际上什么都没有。简单地将该函数从内联移动到我们类上的一个方法，我们就完全解决了这个问题。现在，当 React 查看此 View ​​时，它总是会看到对 this 的引用。
引用:https://medium.com/@adamjacobb/react-native-performance-arrow-functions-binding-3f09cbd57545
因此，不要使用第二个模式，而是使用第一个模式，避免在渲染中使用箭头函数