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

ES6

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

1. promise/generator/async解决了回调地狱(callback hell)
2. => 箭头函数语法糖更好地解决了this指向问题，并简化λ表达式写法
3. 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也会更新视图

咱们能够将组件大体分为两类：

1. display 显示组件，仅须要传入props值value便可
2. input 输入组件，在React里叫作受控组件，由于这种组件要传入两个props，一个是它的值value，另外一个是value变化引发的回调onChange

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

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

Redux

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

1. action事件传给reducer
2. reducer里编写纯函数处理action改变store里的state
3. store改变引发视图更新

总结

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

更多文章 yjy5264.github.io