前端框架二: React 之概览

Posted 2020-08-24

 

一、React组件

1、父子组件

React 中通过组合而不是继承来组织应用。一个应用中从一个组件启动，并在这个组件中创建其他组件，所有的组件最终形成一颗树状结构。

我们依然有父组件和子组件的称呼，不过他们不是继承关系，而是父组件创建了子组件的关系。

这样就涉及到一个重要的问题就是：父子组件的通信问题。

在不借助其他框架的情况下，React 中父子组件是这么通信的：

父组件通过在创建子组件的时候设置 props 来传递数据

子组件通过调用父组件在 props 中设置的回调函数来向父组件传递消息

也就是说，有父子关系的组件其实完全通过 props 属性来通信。那么没有父子关系的怎么办？ 官方建议通过 全局的事件系统来通信。

2、mixins

上面说过 React 中的组件不是继承的，而只是谁创建了谁的关系，那么我们一些公共的逻辑应该怎么处理呢。公共的逻辑应该通过 mixins 来实现。

mixin，可以非常简单的理解，他就是把 一个 mixin 对象上的方法都混合到了另一个组件上，和 $.extend 方法做的事情类似。

不过，react对mixin做了一些特殊处理。

在mixin中写的生命周期相关的回调都会被合并，也就是他们都会执行，而不会互相覆盖掉。 
    比如：你在mixin中可以定义 componentDidMount 来初始化组件，他不会覆盖掉使用这个mixin的组件。实际执行的时候，会先执行 mixin 的 componentDidMount ，最后执行组件的 componentDidMount 方法。

需要注意的是，因为mixin的作用是抽离公共功能，不存在渲染dom的需要，所以它没有render方法。如果你定义了render方法，那么他会和组件的render方法冲突而报错。 
    同样，mixin不应该污染state，所以他也没有 setState 方法。mixin应该只提供接口（即方法），不应该提供任何属性。mixin内部的属性最好是通过闭包的形式作为私有变量存在。就像下面这样：

var Timer = function() {

 var t = 1;//私有属性

 return {//xxxx}

}

最好不要放到this上，避免污染。 
当然，如果你真的在this上写了一些变量，那么react也会进行mixin，因为react并不会区分你的属性到底是不是函数。

二、MVC 架构 flux 和 reflux

因为 React 其实只是 View，所以如果组织大型的应用的话因为缺少数据层会非常难以解耦。React 官方出了一个框架叫flux。严格说 flux 是一个MVC的规范，而不是一个框架，基于 flux 规范完全可以自己去实现而不需要用 flux 库。

有了flux 之后我们就可以把 View 和 Model 完全分开了。View 就是 React 组件，而 Model 是 flux 中的 store。

Store 就是一个存储数据的对象，它会在 dispatch上注册自己感兴趣的事件。

Dispatcher 是flux提供的一个全局的事件分发器，而 action 其实就是自定义的事件而已。

当发生某些事件的时候，比如用户点击了一个按钮，这个时候View 并不会直接去修改 store ，而是触发一个 action。这个Action 通过 dispatch 进行分发，store已经对自己感兴趣的事件注册过，所以他可以收到这个事件，并更新数据，最终反映到视图上的更新。

所以说白了 flux 只是定义了一个规范而已，它的库特别小，因为其实他就提供了一个全局 Dispatcher 的默认实现。至于 store 要怎么写完全是自己决定的，只要能存数据并且在Dispatcher上注册监听就行了。

大家可以咨询这个微信号：858568103，或者扫描下方二维码，里面有资料，可以帮助大家解决一些问题。