13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式

1. redux 简述

 

 

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

 

2. redux 工做流

 

 

 

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

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

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

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

 

3. 使用 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;

 

效果图