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. jsp中include的两种用法

    JSP中的include的两种用法 1.两种用法 <%@ include file=” ”%> <jsp:include page=” ” flush=”true”/> 2.用 ...

  2. ThinkCMF框架上的任意内容包含漏洞

    一.背景 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建. ThinkCMF提出灵活的应用机制,框架自身提供基础的管理功能,而开发者可以根据 ...

  3. hook框架frida的安装以及简单实用案例

    1.下载地址 https://github.co/frida/frida/releases 2.另外两种安装方法 1.Install from prebuilt binaries This is th ...

  4. 解决使用xampp无法通过ip访问的问题

    本地能通过127.0.0.1或者localhost访问,无法通过外网地址访问: win解决防火墙问题: 1.进入控制面板 -> 系统和安全 -> 2.window防火墙 - 允许其他程序通 ...

  5. NO15 第一关课后考试

    第一关课后考试: 1.创建目录/data/oldboy,并且在该目录下创建文件oldboy.txt,然后在文件oldboy.txt里写如内容:inet addr:10.0.0.8 Bcast:10.0 ...

  6. 浅析Java NIO

    浅析Java NIO 前言   在说NIO之前,先来说说IO的读写原理.我们都知道Java中的IO流可以分为网络IO流和文件IO流,前者在网络中使用,后者在操作文件时使用.但实际上两种流区别并不是太大 ...

  7. C++输入问题探究

    突发奇想对C++输入输出做一点研究,主要是做笔试题自己写输入老是花很多时间,所以做一个总结. 对于输入多行字符串,代码如下: #include<iostream> #include< ...

  8. Golang的运算符-算数运算符

    Golang的运算符-算数运算符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.算术运算符概述 常见的算术运算符: +: 可表示正号,如",结果为"Jaso ...

  9. 2的n次幂

    位运算判断2的n次幂: 举个栗子,n = 8:则二进制表示就为1000,n-1则为 0111 取&刚好等于0 嘿嘿,巧妙吧. 再举个栗子,n = 7: 则二进制为 0111,n-1则为0110 ...

  10. Linux应用可通过USB访问Android设备-Chrome OS 75版发布

    导读 谷歌已经为支持的Chromebook设备发布了Chrome OS 75操作系统,这是一个主要版本,增加了各种新功能,最新安全补丁和其他改进. 对于大多数Chromebook设备,Chrome O ...