thinking in react（part3）

翻译

---

version 版本

hierarchy 层次结构

implement 实施

interactivity 互动性

decouple 解耦

typing 打字

no thinking 没有思维

props 道具

concept 概念

state 状况

reserved 保留

top-down 自上而下

bottom-up 自下而上

underlying 底层

complicated 复杂

Step 2: Build a static version in React            ·Now that you have your component hierarchy, it's time to implement your app.

第二步，使用react 来构建一个静态的版本，现在你已经有属于你的组件层次结构了，可以去实施你的app了。

    The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. 

构建静态版本的最最简单的方法是，使用你的数据模型，然后渲染 ui 但是，这样就没有了互动性了

    It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. 

最好能解耦这些进程，因为建立一个静态版本需要很多打字但却很少的逻辑思维，然而增加互动性则要求更多的逻辑思维而不是机械的打字操作。

    We'll see why.To build a static version of your app that renders your data model, you'll want to build components that reuse other components and pass data using props. 

我们来看看为什么，去建立一个静态版本的app需要去渲染你的数据模型，你会希望去建立能够复用的组件，以及能传数据去用的工具。

    props are a way of passing data from parent to child. If you're familiar with the concept of state, don't use state at all to build this static version.

props 是一种父级向孩子传送数据的方式，如果你对状态的概念很熟悉的话，就不要完全用状态来构建静态版本。

    State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.

状态是为互动性所保留的，也就是说，随着时间的推移，数据的改变，因为这是一个你的 app 的静态版本，你会不需要他的。

    You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with FilterableProductTable) or with the ones lower in it (ProductRow). 

你可以建立自上而下或自下而上，也就是说，你可以在你的层次结构中从自上而下建立组件（如从可过滤的产品表单开始建立）或则是从层次结构的底端开始，（产品行目）

    In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build.

在一个简单的例子中，更容易自上而下的构建产品。而在大的项目中，从下自上，并且在开发中写一些测试用例会更加简单一些。

    At the end of this step, you'll have a library of reusable components that render your data model.The components will only have render() methods since this is a static version of your app. The component at the top of the hierarchy (FilterableProductTable) will take your data model as a prop.

在这个步骤的最后，你将会获得一个关于你的数据模型可以重用的组件。这些组件会只有渲染的调用方式，因为这是你的app的一个静态版本的app，在层次结构顶端的组件，会将你的数据以prop的方式进行传递。

If you make a change to your underlying data model and call React.render() again, the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on. React's one-way data flow (also called one-way binding) keeps everything modular and fast.

如果你改变了你的数据模型的底层，然后调用了又react.render（）一次，这些ui 会被更新，很容易看到你的ui更新以及哪里有所改变，因为这没有什么特别复杂的东西，react的单向数据流，（又称为单选数据绑定）使一切模块化和快速化