React+Redux入门学习

最新推荐文章于 2024-07-27 10:00:10 发布

WXDEE

最新推荐文章于 2024-07-27 10:00:10 发布

阅读量543

点赞数 1

分类专栏： react+redux 文章标签： react redux react-redux

本文链接：https://blog.csdn.net/qq_29791893/article/details/79351302

版权

react+redux 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、React

1、定义
React是一个做UI的库，具体来说是做UI组件的库，专注于做MVC中的V。当数据发生变化的时候，react会自动的管理UI界面更新。
对于react，你做的仅仅是构建组件。通过封装，使得组件代码复用、测试及关注点分离更加容易。

2、Virtual DOM
一个轻量级的虚拟的DOM，是react抽象出来的一个对象，用来描述DOM是什么样子的，应该如何呈现，即通过虚拟DOM去更新真实的DOM。
Virtual DOM之所以操作更快，是因为react有个diff算法。更新Virtual DOM并不能保证马上更新DOM，react会等到事件循环结束后，利用diff算法将更新的DOM与之前的作比较，计算出最小的步骤去更新真实的DOM。

3、获取真实DOM节点
当获取用户的输入时，必须获取真实的DOM节点，因为虚拟DOM是拿不到用户输入的，此时，用ref属性从组件获取真实的DOM节点。具体做法：文本框有一个ref属性，后用this.refs.[refName]会返回真实DOM节点。
需注意的是，由于this.refs.[refName]属性获取的是真实DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

4、组件component
React允许将代码封装成组件，然后像插入普通HTML标签一样，在网页中插入这个组件。React.createClass方法用于生成一个组件，所有的组件都必须有自己的render方法，用于输出组件。组件的用法与原生的HTML标签一样，可以任意加入属性，组件的属性可以在组件类的this.props对象上获取。
注意：组件类的第一个字母必须大写，且只能包含一个顶层标签。

5、this.state
State是组件的内部状态，在组件创建时进行初始化。getInitialState方法用于定义初始状态，也就是一个对象，其可通过this.state属性读取；this.setState方法用于修改状态值，每次修改后，自动调用this.render方法渲染组件。

6、this.props
props是组建的外部状态，创建时由外部传入，组建内部可修改。
this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性，它表示组件的所有子节点。
this.props：表示那些一旦定义，就不再改变的特性；
this.state：会随用户互动而产生变化的特性。

二、Redux

1、设计思想
Web应用是一个状态机，视图与状态是一一对应的；
所有的状态保存在一个对象里面；

2、三大原则
单一数据源：整个应用的state被储存在一棵object tree中，并且这个object tree只存在于唯一一个store中。
State是只读的：唯一改变state的方法是触发action，action是一个用于描述已发生事件的普遍对象。
使用纯函数来执行修改：为了描述action如何改变state tree，你需要编写reducers。

3、store
Store是保存数据的地方，你可以把它看成一个容器，整个应用只能有一个store，改变store内state的唯一途径是对它dispatch一个action。Redux提供createStore函数来生成store。

4、state
State是store对象包含的数据。当前时刻的state，可以通过store.getState()拿到。Redux规定，一个state对应一个view，只要state相同，view就相同，反之亦然。

5、action
Action 描述当前发生的事情，是改变 State 的唯一办法，它会运送数据到 Store。Action是一个对象，其中type属性是必须的，表示action的名称。Action就是View发出的通知，View要发送多少种消息，就会有多少种Action。store.dispatch()是View发出 Action 的唯一方法。

6、reducer
Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State。由于Reducer是一个纯函数，即只要是同样的输入，必定得到同样的输出，因此，Reducer 函数里面不能改变 State，必须返回一个全新的对象。

7、store.subscribe()
store.subscribe方法用来设置监听函数，一旦state发生变化，就自动执行这个函数。显然，只要把View的更新函数（对于react项目，就是组件的render方法或setState方法）放入listen，就会实现view的自动渲染。

三、React-Redux

React-Redux将组件分成两大类：UI组件和容器组件。

1、UI组件
只负责UI的呈现，不带有任何业务逻辑；没有状态，即不使用this.state这个变量；所有数据都由参数this.props提供；不使用任何redux的API。

2、容器组件
负责管理数据和业务逻辑，不负责UI的呈现；带有内部状态；使用redux的API。

3、connect
React-Redux规定，所有的UI组件都由用户提供，容器组件则是由React-Redux自动生成。React-Redux提供connect方法，用于从UI组件生成容器组件。

4、mapStateToProps()
mapStateToProps是一个函数，建立一个从（外部的）state对象到（UI组件参数）props对象的映射关系。mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

5、mapDispatchToProps()
mapDispatchToProps用来建立UI组件参数到store.dispatch方法的映射。即，它定义了用户的哪些操作应该当作Action，传给Store。它既可以是一个函数，也可以是一个对象。

6、Provider组件
React-Redux 提供Provider组件，可以让容器组件拿到state。

以上是我在学习react+redux时自己整理的，参考网站如下：
http://www.ruanyifeng.com/blog/2015/03/react.html
https://www.jianshu.com/p/ae482813b791
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html