Question

我可以想象使用状态的任何反应组件都可以重写为使用道具。例如：

var Hello = React.createClass({
    getInitialState: function () {
        return {name: 'World'};
    },

    render: function() {
        return <div>Hello {this.state.name}</div>;
    }
});

var name = 'World';

var element = React.render(<Hello />, document.getElementById('container'));

function toggle_name() {
    name = (name == 'World') ? 'Universe' : 'World';
    element.setState({name: name});
}

Fiddle

如果这是 in 另一个组件，你仍然会用props写它。但最外层组件：

也是如此

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

var name = 'World';

React.render(<Hello name={name} />, document.getElementById('container'));

function toggle_name()
{
    name = (name == 'World') ? 'Universe' : 'World';
    React.render(<Hello name={name} />, document.getElementById('container'));
}

Fiddle

那么我什么时候应该使用状态？

我的变量name肯定具有状态的作用，这就是为什么我想知道我使用React的状态系统会获得什么。

Answer 1

对于亲子沟通，只需传递道具。

使用状态将当前页面所需的数据存储在控制器视图中。

使用道具传递数据＆amp;事件处理程序到您的子组件。

这些列表可以帮助您在处理组件中的数据时提供指导。

<强>道具

不可变（让我们做出快速参考检查）
用于从视图控制器（您的顶级组件）传递数据
更好的性能，使用它将数据传递给子组件

<强>国家

应在您的视图控制器（您的顶级组件）中进行管理
可变
性能更差
不要从子组件访问它，而是使用props传递它

用于两个没有组件的组件之间的通信   亲子关系，您可以设置自己的全局事件   系统。订阅componentDidMount（）中的事件，取消订阅   componentWillUnmount（），并在收到事件时调用setState（）。   通量模式是安排这种方式的可能方式之一。     - https://facebook.github.io/react/tips/communicate-between-components.html

哪些组件应该具有哪些状态？

你的大部分组件都应该只从道具中获取一些数据   渲染它。但是，有时您需要响应用户输入，a   服务器请求或时间的推移。为此你使用状态。

尽量保留尽可能多的组件无状态。通过做   这样你就可以将状态隔离到最合乎逻辑的位置并最小化   冗余，使您更容易推理您的申请。

一种常见的模式是创建几个无状态组件   呈现数据，并在层次结构中具有位于它们之上的有状态组件   通过道具将其状态传递给其子女。有状态的   组件封装了所有的交互逻辑，而   无状态组件以声明方式处理渲染数据。       - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

该怎么做？

State应包含组件的事件处理程序可能更改的数据   触发UI更新。在真实的应用程序中，这些数据往往非常小   和JSON可序列化。在构建有状态组件时，请考虑一下   它的状态的最小可能表示，并且只存储那些   this.state中的属性。 render（）内部只需计算任何其他内容   您需要的信息基于此状态。你会发现这种想法   以这种方式编写和编写应用程序往往会导致最多   正确的应用程序，因为添加冗余或计算值   state意味着你需要明确地保持它们同步而不是   依靠React为您计算它们。      - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Answer 2

state是您的真相来源。如果您的真实来源是组件的外部接受props。如果您的组件确定它自己的真相并随着时间的推移修改它使用state。如果两个组件需要相同的事实，找一个共同的父母并将其存储在那里。

可以将所有state拉到最外面的组件，只让所有子组件使用props。如您所说，您甚至可以从所有组件中提取所有state，以便所有组件仅接受props。

您正在做的是最大化状态影响潜力，而您希望最小化它。最小化影响状态可以更轻松地推断渲染。

对于应用程序中的每个状态：（1）根据该状态识别呈现某些内容的每个组件。（2）查找公共所有者组件（在层次结构中需要状态的所有组件上方的单个组件）。

Thinking In React (Identify where your state should live)

尽可能将状态放在受其影响的组件上：

var Parent = React.createClass({
  getInitialState: function() {
    return {stateParentAndChildCaresAbout: "someVariable"};
  },
  render: function() {
    return <Child tellMeWhatToDo={this.state.stateParentAndChildCaresAbout} />
  }
});

var Child = React.createClass({
  getInitialState: function() {
    return {stateOnlyChildCaresAbout: "someVariable"};
  },
  render: function() {
    return <span>{this.state.stateOnlyChildCaresAbout} {this.props.tellMeWhatToDo}</span>;
  } 
});

在React中，setState（）优于render（）有什么优势？

2 个答案: