React之高级组件-3

什么是高级组件

• 高级组件就是一个函数，你传递给它一个函数，它返回给你一个新的组件；

• 具有提高代码的复用性，灵活性，使代码更加优雅；

高级组件是要给一个函数（不是组件）你给高级组件传递一个组件，
它会返回给你一个新的组件，新的组件会把你传递的组件作为子组件

##下面一个简单的高级组件
const newComponent = higherOrderComponent(OldComponent)

import React,{Componet} from 'react'
export default (WrappedComponent) => {
    class NewComponent extends Component{//新组件
    // 自定义逻辑
        render () {
            return (
               <WrappedComponent />//子组件
            )
        }
    }
    return NewComponent
}
复制代码

redux结构图

Redux是如何实现状态管理的——store、action、reducer三个概念

• action：是事件，它本质上是js的普通对象，它描述发生了什么，action由type：string和其他结构组成；
• reducer：是监听器，只有它可以改变状态，一个纯函数，reducer不能直接修改state状态，所以修改后会生成一个新的state，默认情况下是旧的state；
• store：是一个存公共状态的仓库，需要自己设计数据结构在state中存储自己数据

redux-1 修改共享状态

React.js都是结合Redux和React.js结合的库react-redux;

Redux和React-redux的区别：

• Redux：是一种架构模式(Flux 架构的一种变种)
• React-redux：就是把Redux架构模式和React.js结合起来的一个库；