【问题标题】:Proper use of state in React在 React 中正确使用状态
【发布时间】:2019-10-03 02:08:11
【问题描述】:

我是 React 新手,对 React 中的状态以及我们需要如何以及在何处使用它有点挣扎。到目前为止,我发现“如果修改一条数据不会在视觉上改变组件,那么该数据不应该进入状态”。所以,状态就是重新渲染 UI(我希望我是正确的)。所以,我想问的问题是,我们真的只使用状态来重新渲染 UI 吗?仅此而已?

【问题讨论】:

标签: javascript reactjs


【解决方案1】:

您可以在类组件中使用 state。状态就像您的组件的私有数据,可能会因用户的操作而改变。

状态是不可变的。这意味着您不能通过以下方式直接更改状态 this.state.someVal = "smth"。改变状态的唯一方法是使用 this.setState() 方法。

当你改变状态值时,React 会自动重新渲染你的组件而不刷新页面。换句话说,React.js 会对您的更改做出反应

【讨论】:

    【解决方案2】:

    State 是一个与渲染组件直接相关的对象。您不能直接使用 this.state.foo='bar' 更改状态的原因是,如果您这样做,React 将无法知道它需要重新渲染组件。因此,有一个 setState 方法来更改状态,它在后台调用组件的渲染函数。

    因此,如果您有一些与渲染组件无关的数据,您不希望将其放入状态,因为设置其值会导致发生不必要的渲染。如果您正在使用类组件,您可以直接将该数据放在类上:this.foo='bar'

    【讨论】:

      【解决方案3】:

      基本上是的!两个示例可能是: A - 保存直接呈现给 UI 的项目列表(购物清单或待办事项),随着用户添加和删除项目,这些项目可能会发生变化。 B - 一个值,用于确定您是否希望在 UI 上显示某些内容,例如,您可能有一个名为“showNavbar”的状态值,它是真或假,具体取决于您是否希望用户看到导航吧。

      我希望这有助于以基本的方式理解它:)

      【讨论】:

        【解决方案4】:

        我们使用状态来呈现 UI。 此外,我认为 State 允许 React 组件随着时间的推移更改其输出以响应用户操作、网络响应和其他任何内容,而不会违反此规则。 为此,我们使用 'setState' 方法。

        setState() 是在初始状态设置后更新状态的唯一合法方式

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2020-08-23
          • 2018-06-09
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多