React与Redux开发实例精解

傷城~ 2022-12-03 09:29 198阅读 0赞

# 一、简介 #

### Redux ###

js状态容器，

##### 基本原则： #####

1.  单一数据源
2.  state只读  
    可通过action 和reducert返回一个新的state
3.  使用纯函数来执行修改  
    接收先前的state和，并返回新的state
4.

##### Universal渲染 #####

##### Bable #####

js编译器

1.  
2.  测试框架：Jasmine，Karma,Mocha

# 二、在Node.js中运行 #

npm install babel-register --save-dev

npm i -D babel-preset-es2015 babel-preset-react

# React数据载体 #

state:内部状态

props：组件间 逐级

context：跨级传递数

### props ###

##### 验证props #####

React.propTypes

### Context ###

Virtual DOM

sholdComponentUpdate()

命令式编程

函数式编程：可重复利用的函数

$(document).ready(function(){
    return {
    type:'button',
    props:{
    
    }
    }
    })

##### jsx语法 #####

展开属性：

<Component \{…data\} />

无状态函数/组件

创建时始终保持一个实例，做到内存优化

## 1.4 React数据流 ##

### 1.4.1 state ###

setState()组件会尝试重新渲染。

改变了内部状态，组件需要更新

异步方法，一个生命周期内所有的setState方法会合并操作。

过多的内部状态会数据流变得混乱，程序难以维护。

### 1.4.3 props ###

参数

*  className :根节点class。为方便覆盖原始样式
 *  classPrefix: class前缀。样式分离

组件能分解，一定要拆分。使用子组件的方式来处理。

内置props——children,代表组件的子组件集合。可更具传入子组件的数量来决定是否是数组类型。

<Tabs classPrefix={'tabs'} defaultActiveIndex={0} className=

标签将由break,continue语句引用。与循环语句配合使用

### break continue ###

break退出循环执行循环后面的语句  
continue退出本次循环，从循环顶部继续执行

var num=0;
    outer:
    for(var i=0;i<10;i++){ 
    	for(var j=0;j<10;j++){ 
    		if(i==5&& j==5){ 
    			break outer;
    		}
    		num++;
    	}
    }

### switch ###

switch ("hello") { 
    	case "hello":
    		alert()
    		break;
    	case "good":
    		break;
    	default:
    		alert()
    }
    123456789

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 redux+react-redux

本文主要记录下自己在react道路上的爬坑过程以及对于刚学习redux的同学提供一些可供参考的例子。要知道redux和react并没有半毛钱的关系，redux甚至可以和j

墨蓝/ 2023年10月09日 09:35/ 0 赞/ 93 阅读

相关 React中使用Redux (二) - 通过react-redux库连接React和Redux

react-redux库使用Redux > 上一篇文章演示React中直接使用Redux的使用过程是十分繁琐的, 并且有许多重复代码 > > 但是实际上redux官方帮

约定不等于承诺〃/ 2023年10月02日 20:58/ 0 赞/ 36 阅读

相关 react redux

安装 yarn add redux --save yarn add react-redux --save redux 调试工具首先在chrome中安装 Re

清疚/ 2023年06月29日 02:48/ 0 赞/ 27 阅读

相关 React与Redux开发实例精解

一、简介 Redux js状态容器，基本原则： 1. 单一数据源 2. state只读可通过action 和reducert返回一个新的

傷城~/ 2022年12月03日 09:29/ 0 赞/ 199 阅读

相关 React 初探 [九] redux react-redux 基本使用与counter 案例

[完整代码地址 https://gitee.com/xiaozhidayu/my-react][https_gitee.com_xiaozhidayu_my-react]

谁践踏了优雅/ 2022年11月30日 04:17/ 0 赞/ 327 阅读

相关 Flux --> Redux --> Redux React 入门基础实例使用

本文的目的很简单，介绍Redux相关概念用法及其在React项目中的基本使用 > 假设你会一些ES6、会一些React、有看过Redux相关的文章，这篇入门小文应该能

一时失言乱红尘/ 2022年07月11日 08:44/ 0 赞/ 310 阅读

相关 react redux

在react中使用redux入门。基本的例子使用redux管理react的状态。 <!DOCTYPE html> <html> <head>

亦凉/ 2022年02月19日 00:39/ 0 赞/ 328 阅读

相关 react redux redux-saga

react是前端view框架 redux是前端状态管理器 redux-saga是redux的升级版，异步状态管理 `saga.js`管理异步状态变更，一般是

柔光的暖阳◎/ 2022年02月18日 11:11/ 0 赞/ 362 阅读

相关 react redux

redux store:数据仓库,保存数据的地方 state:一个对象,数据库里的所有数据都放到一个state action:一

爱被打了一巴掌/ 2021年07月25日 02:30/ 0 赞/ 530 阅读

相关 react react-redux

react-redux 和redux一样效果,不同实现安装 cnpm install react-redux --save

蔚落/ 2021年07月24日 16:29/ 0 赞/ 543 阅读