React教程-2 版本v16.2.0



You might think that Board should just inquire what the current state of each Square is. Although it is technically possible to do this in React, it is discouraged because it tends to make code difficult to understand, more brittle, and harder to refactor.


Instead, the best solution here is to store this state in the Board component instead of in each Square – and the Board component can tell each Square what to display, like how we made each square display its index earlier.

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

Pulling state upwards like this is common when refactoring React components, so let’s take this opportunity to try it out. Add a constructor to the Board and set its initial state to contain an array with 9 nulls, corresponding to the 9 squares:

React教程-1 版本v16.2.0




如果你喜欢,你可以直接查看最终项目代码Final Resul.无需担心你现在是否明白理解里面的代码,或者是一些你不熟悉的语法。我们将一步步学习如何制作这个游戏。



继续阅读“React教程-1 版本v16.2.0”