简单易懂的React魔法(12):State和单一数据源原则

在我们进一步讨论之前，有个重要的理论你需要注意。别担心，我会长话短说。

当你开始的时候，可能认为让一个组件拥有state是一件好事，毕竟它将功能和相关数据保存在一个对象中，对吧。

确实，通过这种方式来使组件之间相互独立是很有用的方法，可以将大型应用程序分解成更小的部分，但同时也会将程序变得非常复杂。这些数据存在哪里？它是冗余的么？如果它是冗余的，如何保证当数据变化时所有的数据都会更新？当你的应用像是整个facebook那么大的时候，他们有超过10000个react组件。这会产生极大的混乱。

经验丰富的react开发人员的解决方式是，遵从单一数据源原则。你的所有组件应该有一个主状态，然后将这个状态以props的形式传给子组件。

使用这种技术，当主状态的任何一部分发生改变，它会自动更新以这部分为props的子组件，这种变化将会从上到下到达子组件，这是同步方法，不会重复。

在完美的react组件中，很少有组件有state，所以react有一个特殊的语法来创建一种只有render()方法的组件，它们不含有任何state，它们只是接受一个props然后渲染它。下面给出一个简单的例子：

const FunctionalTest = (props) => {
    return {props.message};
};

一旦你保存它，就可以像其他组件一样使用它。

<FunctionalTest message="Hello from a functional component!" />

别强迫自己逃避使用state，要成为一个务实的程序员，该用的时候就用。