redux常见问题答疑

2024年3月17日 259次阅读 来源: _xianfeng

为何运用redux

React的中心是将UI组件化，由数据驱动UI的展现。然则怎样治理数据模型、组件与数据模型之间的通讯，react并没有很好的处置惩罚方案。Redux由flux演化而来，同时简化了Flux的流程。

仅仅运用react举行开辟的痛点

  1. 组件嵌套层级深，回调地狱。你能够会在一个较深条理的组件里须要更新全局state的某个字段，却无法只能经由历程从顶层组件一层一层通报下来的props举行回调。

  2. 页面的state不可展望。由于state缺少一种可展望的机制，致使用户在举行一些页面操纵(变动state)，或许异步要求有新的数据从服务端返回的时刻，state的变化已不可掌握，很轻易发生bug

redux是怎样处置惩罚痛点的？

1、经由历程react-redux供应的Provider组件,在根组件外面包一层，如许根组件，以及一切的子组件都能拿到store。完成的道理是基于React本身供应的context属性，然则react官方不引荐直接在组件中运用this.context。所以react-redux供应了另一种要领connect，经由历程connect将一般的UI组件晋级为容器组件，同时将猎取store的细节也一并封装在天生容器组件的代码中，从而容器组件能够直接拿到store

<Provider store={store}>
<App/>
</Provider>

// 定义App组件
class Foo extends React.Component{
    render() {
    const { text } = this.props;
    return <div>{text}</div>;
  }
}
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Foo);

2、运用纯函数修正state，保证state变化可展望。每次变动都返回一个全新的state。
3、恪守容器组件与展现组件星散的准绳。这是redux一个主要的头脑，容器组件和展现组件各司其职。

容器组件

容器组件担任以下几件事变：

  1. 处置惩罚数据逻辑

  2. 将store中的state转变为props通报给展现组件，对应mapStateToProps

  3. 将注入了dispatch的函数作为props通报给展现组件，对应mapDispatchToProps

  4. 有状况的(展现组件则是无状况的)

  5. 提议action，更新state

  6. 没有DOM标签，没有款式

展现组件

可复用的组件，又称为“傻瓜组件”，仅仅经由历程容器组件传进来的props举行UI展现，以及操纵回调。感知不到redux的存在，离开redux框架也能运用，只管坚持无状况(可包括少许的UI状况)，有以下几条准绳：

  1. 不理解数据逻辑：不关心数据是怎样获得的，也不关心数据是怎样转变的

  2. 只经由历程props猎取数据和操纵回调

  3. 基本是无状况的：必须有的话，能够是UI的状况

什么时刻引入容器组件

在引入之前，你能够先只用展现组件来构建App。当你发明有些组件并不会用到传进来的属性，而仅仅只是把它往下传给子组件的时刻(而且层级比较深，凌驾两层)，你就要斟酌引入容器组件了。

为何运用immutable.js

起首，在没有immutable.js的情况下，遇到较深条理的数据结构时，更新state会变得很贫苦。

旧的state：

{
  priceInfo: {
    price: 200,
    promotion: {
      offValue: 30
    }
  }
}

如今须要只更新offValue的值为50，该怎样处置惩罚呢？

let newState = _.cloneDeep(this.state);
newState.priceInfo.promotion.offValue = 50;
this.setState(newState);

能够看到，须要先深度复制一份this.state，然后修正offValue的值，末了实行setState。除了这个历程的有点庞杂，别的深度复制对象是挺耗机能的一件事。而经由历程Immutable.js，我们只须要如许做：

let initialState = Immutable.fromJS({
  priceInfo: {
    price: 200,
    promotion: {
      offValue: 30
    }
  }
});
this.setState(initialState.setIn(['priceInfo', 'promotion', 'offValue']), 50);

immutable.js带来的机能提拔

React做机能优化时经常用到 shouldComponentUpdate，只要深度比较才得出准确的值，决议是不是render，而深度比较是非常斲丧机能的。Immutable 则供应了简约高效的推断数据是不是变化的要领，只需 === 和 is 比较就可以晓得是不是须要实行render()，而这个操纵险些零本钱，所以能够极大进步机能。

immutable.js的数据结构怎样准确运用...扩大运算符

在jsx的语法中，你已习惯了运用扩大运算符来通报props，以下所示：

const titleInfo = {
  title: '主题目',
  subTitle: '副题目'
};

...

import Title from 'title';

render() {
  return (
    <Title {...titleInfo}/>
  );
}

然则假如你要通报的数据是Immutable.Map范例的，运用...扩大运算符，获得的数据能够与你希冀的不太一样，由于Immutable.Map的实例对象并非plain object。{...titleInfo}等同于Object.assign({}, titleInfo)。Immutable.js供应了一种要领，能够完成这类转换，假如是Map实例，只需挪用toObject()(不要挪用深度复制的toJS)，就可以够将Immutable.js的Map对象转变为能够运用...扩大运算符的plain object。

    原文作者：_xianfeng
    原文地址: https://segmentfault.com/a/1190000007595271
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞