抛开 React 学习 React(1)

本文主要是介绍抛开 React 学习 React(1)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先阅读下 jQuery 实现的 TodoMVC 源码。
也许你会注意到有一个叫 render 的方法，他会在某个事件触发或者数据更新的时候被调用。现在，我们从头来实现一个例子：当 input 的值改变时，调用 render 函数，并且更新 DOM 元素。

    var state = {value: null}$('#input').on('keyup', function () {state.value = $(this).val().trim();render();})function render(){$('#output').html(state.value)}render();

我们使用一个全局变量 state 来同步所有的东西。也就是说，当 input 的值改变时会更新两样东西：1. 更新整个应用的 state 2. 更新 DOM（根据应用当前的 state 来调用 render 函数）
现在，我们有了一个新想法：

    function output(text){return '<div>' + text + '</div>'}

那么接下来：

   function h2(text){return '<h2>' + text + '</h2>';}function div(text){return '<div>' + text + '</div>';}function header(text){return div(h2(text));}console.log(header('foo') === '<div><h2>foo</h2></div>');   // true

上面的函数都是基于一个 text(input) 然后返回一个 string(text) 。调用 header 的时候传入相同的参数（ input ），都会得到相同的字符串（ output ）。如果你在想思考 React 中的 stateless functions 的话，那么这个其实就是一个简化版。只是 Stateless functions 会返回一个 React Element 而不是一个简单的 string，但是思路是一样的。
既然这样，我们就把这个想法应用到我们之前的例子中。我们添加了一个 button ，用来添加 todo item 。

    var state = {items: [], id: 0};//click回调事件操作了数据，并没有直接操作DOM$('#add').on('click', function (e) {var value = $('#input').val().trim()$('#input').val('')state.items.push({id: state.id++,text: value,completed: false})render();})//click回调事件操作了数据，并没有直接操作DOM$('#list').on('click', function () {var toggleId = parseInt($(this).attr('id'));state.items.forEach(function (el) {el.id === toggleId && (el.completed = !el.completed)})render();})function render () {var items = state.items.map(function (item) {var completed = item.completed ? 'completed' : '';return '<li class="item + ' + completed + '" id="' + item.id + '">(' +item.id + ') ' + item.text + '</li>'}).join('');var html = '<ul>' + items = '</ul>';$('#list').html(html);}render();

在上面，我们定义了两个 click 事件，当他们触发时就会更新我们的 state 以及调用 render 函数。而 render 函数会创建一个 todo list 。 state 作为中间媒介，简化了事件和 DOM 元素之间的交互，而不是通过事件来直接操作 DOM （不需要定义每个 DOM 元素和每个事件以及他们之间的关系）。当某个 action （如 click 事件） 触发之后， state 就会更新，接着调用 render 函数，最后我们的应用就会更新。这样一来，就简化了好多复杂的交互。
可以看到， render 函数有一点乱。我们不妨创建一个函数，他接收一个参数（input），然后基于这个参数返回一个字符串（output）。

    function ItemRow (props) {var className = props.completed ? ' item completed' : 'item'return '<li className="' + className +' ">' + props.text + '</li>'}function ItemsList (props) {return '<ul>' + props.items.map(ItemRow).join('') + '</ul>'}function render (props) {$('#list').html(ItemsList({items: props.items}))}

render 函数并不依赖外部的状态（state），这使得我们在调用 render 时可以随便传入一个 input ，也就意味着我们的应用重新渲染时，相同的 input 会有相同的 output 。需要注意的是，DOM 操作其实是一个 side effect，但是现在我们暂时忽略他。
把 state 从 render 函数中分离出来，可以使得我们很容易实现 Undo/Redo 。
另外一个优化就是传一个 root node 作为参数，而不是写死在 render 函数里面：

   function render (props, node) {node.html(ItemsList({items: props.items}))}

因此，我们可以这样调用 render 函数：

   render(state, $('#list'))

我们会很容易想到：当 state 改变的时候，能不能自动地更新应用？也就是，不用手动地调用 render 函数。

现在，我们来创建一个 store ，他的作用是当 state 改变之后，就立马调用 render 函数。下面的实现虽然简单，但也是一个 advanced state container 的雏形。

   function createStore (initialState) {var _state = initialState || {},_listeners = []function updateListeners (state) {_listeners.forEach(function (listener) {listener.cb(state)})}return {setState: function (state) {_state = stateupdateListeners(state)},getState: function () {return _state},onUpdate: function (name, cb) {_listeners.push({name: name, cb: cb})}}}

现在，我们更新 state 只需要简单地调用 setState 方法。只要 state 一改变，我们的 render 函数就会被调用：

    var store = createStore(store)store.onUpdate('rootRender', function (state) {render(state, $('#list'))})

现在我们学会了什么？我们知道了简单的单向数据流（one-way data flow）的原则。我们给 render 函数传了一个 state 参数，然后 state 就会像流水一样，流到 render 函数的每个层次中。比如， ItemRow 函数需要 ItemsList 给他传进正确的参数。

我们已经创建了多个组件（component），并且我们把这些组件组合（compose）在一起。回想一下前面的 header 例子，我们把 div 和 h2 函数组合成了一个 header 函数。并且，这些函数都是 pure function ，这使得所有更新都是可预测的。

并且，我们使用了 store 来管理我们的 state 。

而，React 会用更好更优美的方法来实现上面这些东西。组件（组合），使用 Virtual DOM 优化渲染，单向数据流等等。

这篇关于抛开 React 学习 React(1)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---