react续集

超、凢脫俗 2023-08-17 16:37 80阅读 0赞

### 1.简介： ###

react也是采用MVVM的设计模式是facebook，2013开源

##### 2.核心是：封装组件 #####

各个组件维护自己的状态和UI，当状态改变，自动重新渲染整个组件

##### 3.核心概念：    组件，jsx，Virtual，DOM,data，Flow(数据流) #####

Angular、React、Vue都是MVVM框架，都能够实现数据变化视图自动变化。但是他们三个人的原理完全不同：  
　　　　Angular：脏检查，词法分析，进行隐形的视图的更新；  
　　　　React：setState()等调用视图函数，配合DIFF算法和Virtual DOM让DOM的变化效率更高；  
　　　　Vue ： 数据劫持

**4.react安装使用**  
 react.min.js - React 的核心库  
 react-dom.min.js - 提供与 DOM 相关的功能  
 babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

#  redux #

可预测的状态管理机，适合vue，react，angular。在react里面使用率最高

用npm下载用 *npm i redux --save*

**三大原则**

### 单一数据源 ###

整个应用的 [state][] 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 [store][] 中。

### State 是只读的 ###

唯一改变 state 的方法就是触发 [action][]，action 是一个用于描述已发生事件的普通对象。

### 使用纯函数来执行修改 ###

为了描述 action 如何改变 state tree ，你需要编写 [reducers][]。

Resucer是createStore的第一个参数，是一个函数，这个函数主要是用来生成新的state，接受两个参数一个是state，一个是action再返回newstate

Action

Action是一个对象，所有state的改变都是用户通过视图层view提交到action action是唯一改变state的途径

Action=\{type:””,payload:””\}type是cation函数名  payload是载荷 伴随函数传的参数

Store.dispatch()是view层唯一发出action的方法 参数是一个action对象

转载于:https://www.cnblogs.com/gaoyan11/p/11594477.html

[state]: https://www.redux.org.cn/docs/Glossary.html#state
[store]: https://www.redux.org.cn/docs/Glossary.html#store
[action]: https://www.redux.org.cn/docs/Glossary.html#action
[reducers]: https://www.redux.org.cn/docs/Glossary.html#reducer