1. redux 简述
当 store 内的 数据进行变更的时候 多个组件感知到 store 内的数据变化 将会被自动更新
2. redux 工作流
扫描二维码关注公众号，回复：
8018880 查看本文章
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;
效果图
