React,Redux,React-redux的错综复杂关系

最近了解了一些React的知识，在这里写一些关于React.js，Redux和React-redux的知识，供大家学习

一.React
1.首先要知道React不是mvc框架，它只是一个库，只专注于视图，也就是v 而我们用到Rreact是React.js进行web app的开发
react的技术栈：react.js + react-router + redux +es6 + webpack + fetch

先来一个小例子认识一下组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="./js/react.js"></script><script src="./js/react-dom.js"></script><script src="./js/browser-5.8.38.min.js"></script><title>Document</title>
</head>
<body><h1>实例</h1><div id="example"></div>
</body>
<script type="text/babel">//定义组件var Example = React.createClass({render(){return(<div><h1>This is an Example</h1></div>)}})ReactDOM.render(<Example/>,document.getElementById("example"));
</script>
</html>
复制代码

结果如下

需要注意的是：
1.要设置type的属性为text/babel
2.组件类的名称必须是首字母大写
3.有且只能有一个根节点，并且所有的标签都必须关闭

2.React以组件的方式去构成UI，将UI上的功能定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，完成UI的构建。

（1）先了解一下state(状态) React中使用state:
定义初始状态，使用getInitialState
获取状态，使用this.state.状态名
设置状态，使用this.setState方法

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="./js/react.js"></script><script src="./js/react-dom.js"></script><script src="./js/browser-5.8.38.min.js"></script><title>Document</title>
</head>
<body><h1>实例</h1><div id="example"></div>
</body>
<script type="text/babel">//定义组件var Example = React.createClass({//定义初始状态getInitialState(){return{name:"dog",age:10}},onClick(){this.setState({age:this.state.age+1})},render(){return(<div><h1>This is an Example</h1>{/*获取状态*/}<h3>{this.state.name}</h3><h3>{this.state.age}</h3><button onClick={this.onClick}>++age</button></div>)}})ReactDOM.render(<Example/>,document.getElementById("example"));
</script>
</html>
复制代码

结果如下：

（2）props
在react中，属性(props)就是用来实现父子组件通信的。父组件向子组件传递的，可以传递数据和方法,在react中传递是单向的，只能父组件向子组件传递
在父组件中设置属性，在子组件中获取属性。
在子组件中是通过this.props.属性名来获取传递的属性

如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="./js/react.js"></script><script src="./js/react-dom.js"></script><script src="./js/browser-5.8.38.min.js"></script><title>Document</title>
</head>
<body><h1>实例</h1><div id="example"></div>
</body>
<script type="text/babel">//定义父组件
var Father = React.createClass({render(){return(<div><h1>father</h1><Son name="小强"></Son></div>)}
})
//定义子组件
var Son = React.createClass({render(){return(<div><h1>son</h1><h3>{this.props.name}</h3></div>)}
})
ReactDOM.render(<Father/>,document.getElementById("example"))
</script>
</html>
复制代码

结果如下：

3.因此由上面的例子可知

state是让组件控制自己的状态，props是让外部对组件自己进行配置，如果不知道用什么，那么就使用props。

一般react自己可以单独完成一个项目

二.Redux
redux是JavaScript状态容器，提供可预测化的状态管理

可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。

Redux 试图让 state 的变化变得可预测，同时可以集中管理
有三大原则 :

1.单一数据源

object tree中只存在唯一一个store中

2.state是只读的

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

3.使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。Reducer只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。

使用纯函数来执行修改，为了描述 action 如何改变 state tree ，你需要编写 reducers

下面就是完成一个redux的大致过程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="./js/redux.js"></script>
</head>
<body><h2>Redux对象</h2><script>{/*console.log(Redux);定义初始的状态*/}const initState = {count:99}{/*定义增加的action之前定义的actionconst increment = {type:"INCREMENT",step:3}现在定义的action*/}function increment(step){return{type:"INCREMENT",step}}{/*之前定义减少的actionconst decrement = {type:"DECREMENT"}现在定义减少的action*/}function decrement (step) {return{type:"DECREMENT",step}}{/*定义一个reducer 根据action中不同的type属性，完成对state的更新操作*/}function reducer(state=initState,action){switch(action.type){case "INCREMENT":return {count:state.count+action.step}case "DECREMENT":return {count:state.count-action.step}default:return state;}}{/*创建store对象*/}const store = Redux.createStore(reducer)console.log(store.getState()){/*订阅功能就是得到的*/}store.subscribe(()=>{console.log("现在的状态为：", store.getState())}){/*通过dispatch action完成状态的修改*/}store.dispatch(increment(1))store.dispatch(increment(2))store.dispatch(increment(3))</script>
</body>
</html>
复制代码

结果如下：

！！！另外注意你的action是同步的还是异步的

在没有异步的action时是这样创建store的

//创建store
const store = createStore(reducer,state)
复制代码

异步时需要对store进行增强

在createStore方法上使用,中间件applyMIddleware是对store进行增强的

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware
)(createStore);
//创建store
const store = createStoreWithMiddleware(reducer,state)
复制代码

Redux是一个提供可预测化的状态管理，它自己是无法实现项目的。

三.React-Redux：
1.从字面上看就知道了，react-redux就是将react和redux连接起来

我们已经定义好了react的组件和redux的状态管理器，这时需要连接react和redux，将项目合并，必不可少的要用到react-redux的connect方法将笨拙的组件生成容器组件

调用connect方法的格式如下：

connect (mapStateToProps,mapDispatchToProps)(展示组件)

mapStateToProps是从state对象到props对象的映射，以state为参数

mapDispatchToProps是从笨拙组件方法到store.dispatch方法的映射，以dispatch为参数，可以使用bindActionCreators(actionCreators,dispatch)来定义

//定义mapStateToProps
function mapStateToProps(state){return{counter:state.counter}
}
//定义mapDispatchToProps
function mapDispatchToProps(dispath){return bindActionCreators(actions,dispath)
}//将Counter变量成容器组件并导出
export default connect (mapStateToProps,mapDispatchToProps)(Counter)
// 如此一来，我们的counter就变成了一个容器组件，
// 状态和方法都作为组件的props来使用的。
复制代码

2.Provider组件的作用，就是给后代组件提供store对象。
通常需要放到入口的js文件中

<Provider store={store}><App /></Provider>,
复制代码

通过Provider可以使后代使用store对象

使用props将属性和方法传递到子组件中，让子组件调用方法实现

class Counter extends Component{render(){console.log(this.props)return(<div><Show counter={this.props.counter}/><p><Add increment={this.props.increment}   />&nbsp;<Sub decrement={this.props.decrement}  />&nbsp;<AsyncAdd incrementAsync={this.props.incrementAsync} />&nbsp;<OddAdd incrementIfOdd={this.props.incrementIfOdd} /></p></div>)}
}
复制代码

四.从上面的知识可以知道：

react就是一个状态机，用于构建用户界面的。react本身是有状态管理机制的。定义初始状态，根据状态渲染界面，修改状态是通过setState来实现的。也就是单独使用react可以完成一个不大的项目。

redux是状态管理器，只是用来管理状态的，它是一个独立的状态管理工具，可以在任何地方使用，要完成大的项目就必须要使用redux了。

但是只有react和redux是不行的，因为react和redux是单独存在的一个库，必须要有一个库来使它们连接起来，而这个库就是react-reudx。

因此react，redux和react-redux在完成大型项目时是必不可少的。

转载于:https://juejin.im/post/5b77d05de51d4538c17dd4f2

React,Redux,React-redux的错综复杂关系相关推荐

Flux -- Redux -- Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
Flux --gt; Redux --gt; Redux React 入门基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
React入门-9.redux你好
Redux入门 1. 介绍 redux是js的状态管理机制,与vuex类似,不过vuex是为vue定制的.而redux并非仅仅服务于react,在jquery,angular,甚至于原生的js中都可以 ...
react-redux图解_如何将React连接到Redux —图解指南
react-redux图解 by Princiya 由Princiya 如何将React连接到Redux -图解指南 (How to connect React to Redux - a diagra ...
React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
函数式编程在Redux/React中的应用
本文简述了软件复杂度问题及应对策略:抽象和组合:展示了抽象和组合在函数式编程中的应用:并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实践.这其中包括了一段有趣的Redux推导 ...
React Suspense提供Redux的替代方案
React 16.6引入了Suspense,它能够在某些时候(比如通过API调用获取数据)暂停渲染并展现一个加载中的指示器. 在常见的简单场景中,React Suspense消除了使用Redux的必要 ...
Router入门0x205: react-route + redux + react 集成
0x000 概述这一章终于大集成了 0x001 集成react 源码 import React from 'react' import ReactDom from 'react-dom'class ...

React,Redux,React-redux的错综复杂关系

React,Redux,React-redux的错综复杂关系相关推荐

最新文章

热门文章