redux

前言 之前我们实现了 redux 的功能，这次我们来实现一下配合 redux 开发中经常会用到的一个库—— react-redux。本文不会详细介绍 react-redux 的使用，另外需要了解 Context API， 再看此文就很容易理解了。可以看看我之前写的几篇文章 实现一个迷你Redux（基础版） 实现一个Redux（完善版） 浅谈React的Context API react-redux 基本使用 用个简单的加减数字作例子, 把代码贴出来： redux.js import { createStore } from 'redux' // actions const ADD_NUM = 'ADD_NUM' const DESC_NUM = 'DESC_NUM' // action creators export function addNumAction ( ) { return { type : ADD_NUM, } } export function reduceNumAction ( ) { return { type : DESC_NUM, } } const defaultState = { num : 0 , } // reducer const reducer = ( state = defaultState, action ) => { switch

说到状态管理器，轮子满天飞。在 Class 时代，redux 与 mobx 几乎占据了全部市场，几乎没有没用过 redux 的同学。随着 Hooks 的诞生，新的一批轮子应运而生，其中有代表性的有 unstated-next、constate 等等。 当然无论什么轮子，要解决的问题都是一样的：**跨组件状态共享。**在解决这个核心问题的同时，需要尽可能的满足以下几个特性： TypeScript 支持 友好的异步支持 支持状态互相依赖 同时支持 Class 与 Hooks 组件 使用简单 Recoil 体验 最近，facebook 官方出了一个状态管理器解决方案 Recoil ，我们来体验一下。 准备工作 使用 Recoil，我们需要在项目最外层包一个 RecoilRoot ，这个和大部分状态管理器一致，通过 context 来跨组件传递数据。 import React from 'react'; import { RecoilRoot } from 'recoil'; function App() { return ( <RecoilRoot> ... </RecoilRoot> ); } 复制代码 跨组件状态共享 状态最简单的就是定义和使用。在 Recoil 中，通过 atom 来定义一个状态。 const inputValueState = atom({ key:

分享一个RN快速开发库： react-native-easy-app 。一款为React Native App开发提供基础服务的纯JS库( 支持 IOS & Android )，可以为开发者开发项目提供强有力的支持，可以大幅度提高编码的效率，特别是在项目搭建初期，至少可以为开发者减少30%的工作量。 由于前面的文章已经做过介绍，在这里就不详细介绍了，通过本开源库，你可以有以下“高级的操作”： 可以像访问内存对象一样访问AsyncStorage 相关文章： 一分钟实现，一个RN持久数据管理器 ； react-native-easy-app 详解与使用之（一） AsyncStorage 只需要几十行代码就能实现，一个完整的app与服务器的Http请求交互 相关文章： 二十分钟封装，一个App前后台Http交互的实现 ； react-native-easy-app 详解与使用之（二） fetch 一行配置 + 基础组件的使用就即可以实现，UI自动屏幕适配 相关文章： 详解与使用之（三） View，Text，Image，Flatlist ； react-native-easy-app 详解与使用之（四）屏幕适配 另附有多个不同版本的Demo供大家参考用法： Sample Sample_Mobx Sample_Redux 以下为Sample_Redux示例程序的UI部分截图：

前言 每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制 必须使用它的依赖注入 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免） 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。 二、React 它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍： const getData = () => { // 如果不存在，就在缓存中创建一个并返回 // 如果存在，就从缓存中拿 } 因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。为什么我一直不认同在中后台项目中使用React