本文主要是介绍抛开 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)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!