javascript - React - 将 'this' 作为 Prop 传递

Question

这样做有什么副作用吗？

class App extends React.Component {
    hello() {
        console.log("hello")
    }

    render() {
        return <Layout app={this}>
    }
}

所以稍后我可以从布局中引用 this.props.app.hello(和其他)？

Answer 1

这不安全。

React 不知道如何观察变化，所以你可能会错过重新渲染。 React 使用=== 来检查状态变化，而App 永远是=== 到App，即使状态或属性发生变化。

举个例子:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.setState({text: 'default value'});
    }

    hello() {
        this.setState({...this.state, text: 'new value'});
    }

    render() {
        return (
            <div onClick={this.hello}>
                <Layout app={this}>
            </div>
        );
    }
}

class Layout extends React.Component {
    render() {
        return <div>{this.app.state.text}</div>
    }
}

当您点击父 div 时，this.hello 将被调用，但子组件不会检测到状态更新，并且可能不会按预期重新呈现。如果它确实重新呈现，那将是因为父对象做了。依赖这个会导致 future 的bug。

一个更安全的模式是只将需要的内容传递给props:

class App extends React.Component {
    //...

    render() {
        return (
            <div onClick={this.hello}>
                <Layout text={this.state.text}>
            </div>
        );
    }
}

class Layout extends React.Component {
    render() {
        return <div>{this.props.text}</div>
    }
}

这将按预期更新。