React 中基于当前状态的 setState

在 React 中更新有状态组件时，组件使用当前状态来更新新状态被认为是一种不好的做法。

例如，如果我有一个类存储过滤器在其状态中是否打开，那么在性能方面，用于更新状态的这些选项之一是否比另一个更可取？

选项1：

class Container extends Component {
    state = {
        show: false
    }

    show = () => this.setState({ show: true })

    hide = () => this.setState({ show: false })

    render() {
        <ExternalComponent
            show={this.show}
            hide={this.hide}
        />
    }
}

选项2：

class Container extends Component {
    state = {
        show: false
    }

    toggleVisibility = () => this.setState({ show: !this.state.show })

    render() {
        <ExternalComponent
            toggleVisibility={this.toggleVisibility}
        />
    }
}

选项 3：

class Container extends Component {
    state = {
        show: false
    }

    setShow = (newVal) => this.setState({ show: newVal })

    render() {
        <ExternalComponent
            setShow={this.setShow}
        />
    }
}

组件访问自己的状态没有任何问题。只写状态不会很有用！但是，在向其他组件公开组件状态或状态更改方法时应该非常小心。组件状态是内部的，只能通过经过深思熟虑的接口从外部进行访问，以防止组件变得混乱。

事实上，有一个与示例#2 类似的示例在反应文档中 https://facebook.github.io/react/docs/handling-events.html:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

但是请注意与您的示例的区别。需要在构造函数中绑定toggle方法，以确保this意味着你期望它意味着什么。

如果包装组件是跟踪子组件可见性的组件ExternalComponent，然后我希望包装器渲染某种隐藏/显示可供性，而不是将切换方法传递到子组件中，然后将当前可见性作为道具传递到子组件中或有选择地渲染它（请注意，选择性渲染将导致整个子组件在再次启用时重新安装，这可能会很昂贵；隐藏它可能比拆除它并重新创建它更好）。这使得关注点的划分变得清晰：包装器知道可见性，而子组件不需要知道如何或为何做出该决定，也不需要接触包装器的内部状态。