react-redux

115 阅读2分钟

有了react-redux依赖,就省去了store.subscribe()监听方法。 connect其实就是个高阶组件。

react-redux介绍

React和Redux事实上是两个独立的产品,可以使用Recat而不使用Redux,也可以使用Redux而不适用Recat,而一个名叫Rreact-redux的库是将react和redux结合的一个库,通过对redux API的封装形成基于react的组件,操作更加简洁。

  • 安装:cnpm i redux --save-dev 注意:必须要安装redux
  • npm i react-redux --save-dev

react-redux原理

  • ■react-redux的两个最主要功能:
  • ■connect:连接数据处理组件和内部UI组件:
  • ■Provider:提供包含storel的context,把我们用reduxt创建的store传递到内部的其他组件。让内部组件可以享有这个store并提供对state的更新。
  • ■通过Connect:实现传递Store的目的
  • ■Provider组件最主要用于封装ui组件,并且将store传递到内部的其他子组件当中,connect方法的主 要用作是连接数据处理组件和ui组件,connect方法通过三个主要的参数,这三个参数是三个函数,
  • 主要的作用利用redux api实现对store的操作;从而更新state重新渲染ui组件。

高阶组件定义

  1. a higher-order component is a function that takes a component and retums a new component.
  2. 翻译:高阶组件就是一个函数。且该函数接受一个组件作为参数,并返回一个新的组件。
  3. 高阶组件(HOC)是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它 只是一种模式,这种模式是由react自身的组合性质必然产生的。
  4. 在我们项目中使用react-。redux框架的时候,有一个connectl的概念,这里的connect.其实就是一个高阶组件。
  5. 高阶组件其实就是用来封装不同组件里相同的逻辑的

只有在类式组件里会这么搞代码

  • 如果不同的组件,有很多相同的逻辑,就可以使用高阶组件。把相同的组件作为参数传到高阶组件里,然后在高阶组件里定义一个新的的组件,然后在新的组件里把传进来的组件作为它的子组件进行调用,把数据作为子组件的属性传进去,并把新组件return出来,这样的话,高阶组件的返回值就是一个新的组件。