React发展几年前的现状个人理解(React新手向导)

objc94 发布于2019-08-22 13:51 / 617人阅读

摘要：带来的重要的改变我认为有三点解决了回调地狱箭头函数语法糖更好地解决了指向问题，并简化表达式写法使进入面向对象编程方案一既然有了，那么一个视图出来不就可以了采用原来的结构，控制视图，并且负责与层通信每一个页面都是一个，页面之间都通讯用事件订阅

ES6

ES6带来的重要的改变我认为有三点：

promise/generator/async解决了回调地狱(callback hell)

=> 箭头函数语法糖更好地解决了this指向问题，并简化λ表达式写法

class使JS进入面向对象编程(OOP)

方案一：MVC

既然有了OOP，那么new一个视图出来不就可以了

采用原来的MVC结构，Control控制视图，并且负责与Model层通信

每一个页面都是一个MVC，页面之间都通讯用事件订阅就可以了
在一个中大型项目中这是一个优雅的解决方案吗？

方案二：状态机

将所有的视图写成v=f(state)的形式，所有的状态交给一颗state树来管理

每一个输入事件作为一个action传给一个处理函数，这个函数会改变state树里的状态
每一个状态发生变化都会引起该状态对应所有对应视图发生变化
怎样写成v=f(state)的形式？

React

巧了，React其实就是一个状态机
React组件内部改变this.state即会更新视图
外部改变传入的props也会更新视图

我们可以将组件大致分为两类：

display 显示组件，仅需要传入props值value即可

input 输入组件，在React里叫做受控组件，因为这种组件要传入两个props，一个是它的值value，另一个是value变化引起的回调onChange

(输入组件可以交给高阶组件封装的form表单自动处理，value和onChange都省了，可以参考我写的另一篇 React高阶组件实现表单双向绑定)

将遇到的每一个模块封装成一个组件，内部紧耦合，外部解耦只需要传入状态
将这些组件组装成一个完整的页面即是一个v=f(state)
这个时候再将这些页面交给Redux来处理

Redux

严格的单向数据流是Redux架构的设计核心

action事件传给reducer

reducer里编写纯函数处理action改变store里的state

store改变引起视图更新

总结

业务逻辑由redux处理，组件内部严格封装只留必要的接口
如果组件有现成的(比如antd)，解耦完成的React方案开发起来速度简直不要太快

更多文章 yjy5264.github.io

云服务器私有云几年前 react _React React 源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92530.html

HTML5行业现状与未来 - 2016年终大盘点

摘要：行业现状与未来年终大盘点大幅动荡后，即将进入平稳期前端，在年及以前，一直处于一种萌芽期的状态当中，直至年才进入行业的成长期。 HTML5行业现状与未来 - 2016年终大盘点 1. 大幅动荡后，即将进入平稳期 HTML5（WEB前端），在2012年及以前，一直处于一种萌芽期的状态当中，直至2013年才进入行业的成长期。HTML5（WEB前端）在2013和2014年，随着行业的推动慢慢的...

mmy123456 2019-08-20 14:20 评论0 收藏0
HTML5行业现状与未来 - 2016年终大盘点

摘要：行业现状与未来年终大盘点大幅动荡后，即将进入平稳期前端，在年及以前，一直处于一种萌芽期的状态当中，直至年才进入行业的成长期。 HTML5行业现状与未来 - 2016年终大盘点 1. 大幅动荡后，即将进入平稳期 HTML5（WEB前端），在2012年及以前，一直处于一种萌芽期的状态当中，直至2013年才进入行业的成长期。HTML5（WEB前端）在2013和2014年，随着行业的推动慢慢的...

zone 2019-08-30 15:52 评论0 收藏0
HTML5行业现状与未来 - 2016年终大盘点

摘要：行业现状与未来年终大盘点大幅动荡后，即将进入平稳期前端，在年及以前，一直处于一种萌芽期的状态当中，直至年才进入行业的成长期。 HTML5行业现状与未来 - 2016年终大盘点 1. 大幅动荡后，即将进入平稳期 HTML5（WEB前端），在2012年及以前，一直处于一种萌芽期的状态当中，直至2013年才进入行业的成长期。HTML5（WEB前端）在2013和2014年，随着行业的推动慢慢的...

UsherChen 2019-08-01 16:19 评论0 收藏0
2018年前端开发回顾

摘要：在整个年，看到发布版增加了许多功能，包括新的生命周期方法新的上下文指针事件延迟函数和。它在等待渲染异步响应时数据，是延迟函数背后用来管理组件的代码分割的。发布自第版开始将近年后，于年发布。前端发展发展迅速,非常的快。本文将回顾2018年一些重要的前端新闻，事件和 JavaScript 趋势。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ showImg(ht...

crelaber 2019-08-23 14:12 评论0 收藏0