抛开 React 学习 React(2)

让我们继续第一部分没讲到的东西。 这次的文章主要是专注于如何重构我们的 todo list。首先，我们还没有正确地处理事件。现在，我们的组件根本就没有绑定任何事件。在 React 里面，数据流是从上往下，而事件流则是从下往上（In React data flows down while events move up）。也就是说，当事件触发的时候，我们应该沿着组件链，从下往上找其对应的回调函数。比如，我们的 ItemRow 函数应该调用一个从 props 传递下来的函数。
那么，我们怎么实现呢？下面是一个小尝试：

   function ItemRow (props) {
      var className = props.completed ? 'item completed' : 'item';

      return $('<li>')
        .on('click', props.onUpdate.bind(null, props.id))
        .addClass(className)
        .attr('id', props.id)
        .html(props.text);
    }

在上面，我们给 list 元素绑定了一个事件。当点击他们的时候，onUpdate 函数就会被调用。可以看到, onUpdate 函数是从 props 传递下来的。
现在，我们不妨定义一个函数，他可以在创建元素的同时为其绑定事件。

   function createElement (tag, attrs, children) {
      var elem = $('<', + tag + '>');

      for (var key in attrs) {
          var val = attrs[key];
          //如果传进来的attr属性数组中以on开头，那么为其绑定事件，否则当做普通属性处理
          if(key.indexOf('on') === 0) {
             var event = key.substr(2).toLowerCase();
             elem.on(event, val);
          } else {
             elem.attr(key, val);
          }
      }

      return elem.html(children);
    }

这样一来，我们的 ItemRow 函数可以写成这样：

   function ItemRow (props) {
      var className = props.completed ? 'item completed' : 'item';
      //调用上面的方法，在创建元素的同时绑定事件
      return createElement('li', {
        id: props.id,
        class: props.className,
        onClick: props.onUpdate.bind(null, props.id)
      }, props.text)
    }

需要注意的是，React 中的 createElement 函数是创建了一个 js对象来表示 DOM 元素。这里让我们可以看看 React 中的 JSX 语法到底是怎样子的。
下面就是一个 JSX 例子：

  return ( <div id='el' className='entry'> Hello </div>) 

接着会转换成调用createElement：

    var SomeElement = React.createElement('div', {
      id: 'el',
      className: 'entry'
    }, 'Hello')

然后调用 SomeElement 函数会返回一个像下面差不多的 js对象：

   {
      // ...
      type: 'div',
      key: null,
      ref: null,
      props: {
        children: 'Hello',
        className: 'entry',
        id: 'el'
      }
    }

想要了解JSX更多的话，请阅读 React Components, Elements, and Instances
回到我们的例子中，onUpdate 函数是从哪里来的？
首先来看看我们的 render 函数。他定义了一个 updateState 函数，然后通过 props 把这个函数传给 ItemList 组件。

    function render (props, node) {
      function updateState (toggleId) {
        state.items.forEach(function (el) {
          if (el.id === toggleId) {
            el.completed = !el.completed
          }
        })
        store.setState(state)
      }

      node.empty().append([ItemList({
        items: props.items,
        onUpdate: updateState
      })])
    }

然后，ItemList 函数会把 onUpdate 传递到每个 ItemRow。

    function extending (base, item) {
      return $.extend({}, item, base)
    }

    function ItemsList (props) {
      return createElement('ul', {}, props.items
        .map(extending.bind(null, {
          onUpdate: props.onUpdate
        }))
        .map(ItemRow))
    }

通过以上我们实现了：数据流是沿着组件链从上往下流，而事件流是从下往上。这就意味着我们可以把定义在全局的监听器移除掉（用来监听点击 item 的时候改变其状态的监听器）。那么，我们把这个函数移到了 render 函数里面，也就是前面所讲的 updateState。

我们还可以重构

现在我们把 input 和 button 从 HTML 标签变成了函数。因此，我们整个 HTML 文件就只剩下一个 div。

    <div id="app"></app>

因此，我们可以很简便地创建 input 元素，就这样：

    var input = createElement('input', {id: 'input'})

同样地，我们也可以把监听 searchBar button 点击事件的全局函数放在我们的 SearchBar 函数里面。SearchBar 函数会返回一个 input 和一个 button 元素，他会通过 props 传进来的回调函数来处理点击事件。

    function SearchBar(props) {
      function onButtonClick (e) {
        var val = $('#input').val()
        $('#input').val('')
        props.update(val)
        e.preventDefault()
      }

      var input = createElement('input', {id: 'input'})

      // move listener to here
      var button = createElement('button', {
        id: 'add',
        onClick: onButtonClick.bind(null)
      }, 'Add')

      return createElement('div', {}, [input, button])
    }

在上面，我们的 render 函数在调用 SearchBar 的同时需要传递正确的 props 参数。

在我们重构 render 函数之前，让我们想想 re-render 应该在哪里调用才是正确的。首先，忽略我们的 store，把注意力集中在如何在一个 high level component 中处理 state。

目前为止，所有的函数都是 stateless 的。接下来我们会创建一个函数，他会处理 state，以及在适当的时候更新子组件（children）。

Container Component

让我们来创建一个 high level container 吧。与此同时，为了更好理解，你可以阅读Presentational and Container Component 。

首先，我们给这个 container component 取名为 App。他所做的事情就是调用 SearchBar 和 ItemList 函数。现在，我们继续重构 render 函数。其实就是把代码移到 App 里面去而已。

我们不妨先来看看 render 现在是怎样子的：

    function render (component, node) {
      node.empty().append(component)
    }

    render(App(state), $('#app'))

我们的 render 函数只是简单地把整个应用渲染到某个 HTML 节点。但是，React 的实现会比这个复杂一点，而我们仅仅把一棵 element tree 添加到指定的节点中而已。但是抽象起来理解的话，这个已经足够了。

现在，我们的 App 函数其实就是我们旧的 render 函数，除了 DOM 操作被删掉。
现在，我们的 App 函数其实就是我们旧的 render 函数，除了 DOM 操作被删掉。

    function App (props) {
      function updateSearchBar (value) {
        state.items.push({
          id: state.id++,
          text: value,
          completed: false
        })
      }

      function updateState (toggleId) {
        state.items.forEach(function (el) {
          if (el.id === toggleId) {
            el.completed = !el.completed
          }
        })
        store.setState(state)
      }

      return [
        SearchBar({update: updateSearchBar}),
        ItemsList({items: props.items, onUpdate: updateState})
      ]
    }

我们还需要改进一样东西：我们访问的 store 是全局的，并且重新渲染的话需要调用 setState 函数。

我们现在来重构 App 函数，使得他的子组件重新渲染的是不需要调用 store。那么应该要怎么实现呢？

首先我们暂时不考虑 store，而是想想怎么调用 setState 函数，使得组件和他的子组件重新渲染。

我们需要跟踪这个 high level component 当前的状态，并且只要 setState 一调用，就立马重新渲染。下面是一个简单的实现：

    function App (props) {
      function getInitialState (props) {
        return {
          items: [],
          id: 0
        }
      }

      var _state = getInitialState(),
        _node = null

      function setState (state) {
        _state = state
        render()
      }

      // ..
    }

我们通过调用 getInitialState 来初始化我们的 state，然后每当使用 setState 来更新状态的时候，我们会调用 render 函数。

而 render 函数要么创建一个 node，要么简单地更新 node，只要 state 发生改变。

    // naive implement of render

    function render () {
      var children = [
        SearchBar({update: updateSearchState}),
        ItemList({
          items: _state.items,
          onUpdate: updateState
        })
      ]

      if (!_node) {
        return _node = createElement('div', {class: 'top'}, children)
      } else {
        return _node.html(children)
      }
    }

很显然，这对性能来说是不好的。需要知道的是，React 中的 setState 不会渲染整个应用，而是组件和他的子组件。

下面是 render 函数的最新代码，我们调用 App 时不需要带任何参数，只是需要在 App 里面简单地调用 getInitialState 来初始化 state。

    function render(component, node) {
      node.empty().append(component)
    }
    render(App(), $('#app'))

继续改进

如果有一个函数，他会返回一个对象。这个对象包含了 setState 函数，还能够区分传进来 props 和 组件本身自己的 state。

差不多就像下面这样：

    var App = createClass({
      updateSearchState: function (string) { /*...*/ },

      updateState: function (obj) { /*... */ },

      render: function () {
        var children = [
          SearchBar({
            updateSearchState: this.updateSearchState
          }),
          ItemsList({
            items: this.state.items,
            onUpdate: this.updateState
          })
        ]

        return createElement('div', {class: 'top'}, children)
      }
    })