1. redux 简述

当 store 内的 数据进行变更的时候  多个组件感知到 store 内的数据变化 将会被自动更新

2. redux 工作流

Store        代表数据存储  (例如: 图书馆管理员)

React Components 代表 react 组件 (例如: 借阅的人)

Action Creators    代表 react 组件所触发的时间 ( 例如: 借阅的人像图书馆借的什么书 )

Reducers     代表 react 各个组件的状态 (例如:图书馆管理员记录借了什么书)

3. Redux 设计和使用的三项原则

  1. store 是唯一的  整个项目中只有一个 store

  2. 只有 store 能够改变自己的内容

    store 拿到 reducer 的数据 自己对自己进行的更新 所以是 store 进行的自我更新

   3. reducer 必须是纯函数 ( 给定固定的输入 一定有固定的输出 )

    1. reducer 是一个函数

    2. 返回的数据 包括Date , ajax , setTimeout 等这些函数的请求 他都不是一个纯函数

    3.不能有副作用 ( 不能做其他参数的修改 )

4. Redux 核心 api

  创建 store

    createStore()

  分发 action

    store.dispatch()

  获取 store内的 state

    store.getState();

  订阅每次 store 改变

    store.subscribe();

4. 使用 antd 编写 TodoList 页面布局

  1. 创建一个新的 react app

    npx create-react-app my-app

    cd my-app

    npm start

  2. 打开 antd 官网

    安装 antd

      yarn add antd

    引入 antd 的样式

      import 'antd/dist/antd.css';

  3. 使用 antd 的 input , List, Button 框 参考官方文档  antd 官网

# eg :  TodoList.js

import React, { Component } from 'react';
import { Input , Button, List} from 'antd';
import 'antd/dist/antd.css';
 
const data = [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.',
];
class TodoList extends Component
{
constructor(props){
super(props);
this.state = {
inputValue: '',
list:[]
}
}
render() {
return (
<div style={{paddingTop: '10px', paddingLeft: '10px'}}>
<div>
<Input placeholder="default size" style={{marginRight: '10px', width: "300px" }} />
<Button type="primary">提交</Button>
</div>
<div>
<List
style={{ width: '300px', marginTop : '10px'}}
bordered
dataSource={data}
renderItem={item => <List.Item>{item}</List.Item>}
/>
</div>
</div>
)
};
}
export default TodoList;

效果图

13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式的更多相关文章

  1. React之 redux 的简单介绍及使用

    1.为什么使用redux?在小型react项目的开发中 ,view(视图层)中的数据模型(即数据),可以存放在组件中的 state 对象,换句话说页面中的动态数据存放在 state 中. 但对于开发大 ...

  2. 14. react 基础 redux 的编写 TodoList 功能

    1. 安装 redux 监听工具 ( 需要翻墙 ) 打开 谷歌商店 搜索 redux devtool 安装第一个即可 2. 安装 redux yarn add redux 3. 创建 一个 store ...

  3. react基础(1)

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  4. 结合React使用Redux

    前面的两篇文章我们认识了 Redux 的相关知识以及解决了如何使用异步的action,基础知识已经介绍完毕,接下来,我们就可以在React中使用Redux了. 由于Redux只是一个状态管理工具,不针 ...

  5. 《React 与 Redux 开发实例精解》出版了!

    <React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...

  6. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  7. 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)

    一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...

  8. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  9. 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。

    前言 前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...

随机推荐

  1. CRC校验算法详解

    CRC(Cyclic Redundancy Check)循环冗余校验是常用的数据校验方法,讲CRC算法的文章很多,之所以还要写这篇,是想换一个方法介绍CRC算法,希望能让大家更容易理解CRC算法. 先 ...

  2. python 关于异常处理 try...except... 的两个案例

    输入若干个成绩,求所有成绩的平均分.每输入一个成绩后询问是否继续输入下一个成绩,回答“yes”就继续输入下一个成绩,回答“no”就停止输入成绩. numbers = [] #使用列表存放临时数据 wh ...

  3. openCV 3.4 windows下的配置说明

    链接: https://pan.baidu.com/s/1dkS_G8ZSBD8EnhYeEFZxhQ 密码: xu99 (从官网下的, 但360会提示有毒, 哈哈哈) 运行exe, 解压openCV ...

  4. python记事本实现查询替换

    python 大作业 自己写了记事本  也参考网上的  查询会有点问题 替换没问题 # encoding=utf- from tkinter import * from tkinter.filedia ...

  5. STM32之GD25Q256应用笔记

    前言 使用标准SPI指令格式: 3字节地址模式或4字节地址模式: 支持SPI 总线 模式0 和 模式3: 存储容量32MB: 时钟频率范围:80Mhz – 104Mhz: 主机:STM32F103ZE ...

  6. 在ubuntu中使用ipython

    python自带的shell实在是不怎么好用 大家可以用一下ipython这个软件,它可以自动缩进,补齐,语法高亮等 安装办法: sudo apt install ipython #这个是安装2.7的 ...

  7. HDU - 3724 Encoded Barcodes (字典树)

    题意:给定n个字符串和m个经过处理得到的字符串,问对于m个字符串中的每个字符串,n个字符串中以该字符串为前缀的个数.分析:1.误差在[0.95x, 1.05x],因此求8个数的平均数,大于平均数为1, ...

  8. maven手动安装ojdbc6.jar包到本地仓库

    需要jar文件 ojdbc6.jar jar下载地址1   下载地址2 本地执行: mvn install:install-file -Dfile=D:/ojdbc6.jar -DgroupId=co ...

  9. Java扫雷游戏: JMine

    JMine是用Java和Swing编写的扫雷程序.作者是Jerry Shen(火鸟),代码有一定年头了,最开始是作者的课程设计.阅读这种小程序对编程语言的学习挺有帮助.本文只简单介绍一些关键的地方,实 ...

  10. 087-把PHP数组中的元素按随机顺序重新排列shuffle

    <?php $arr=array(3,23,'A','f','123','hello'); //定义一个数组 echo '排序之前的数组信息:<br>'; print_r($arr) ...