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

耀九天
314 阅读7分钟

最近了解了一些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
        之前定义的action
        const increment = {
            type:"INCREMENT",
            step:3
        }
        现在定义的action*/}
        function increment(step){
            return{
                type:"INCREMENT",
                step
            }
        }
        {/*之前定义减少的action
        const 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在完成大型项目时是必不可少的。

avatar
文章
阅读
粉丝