2020/11/20、 周五、今天又是奮斗的一天。

@Author：Runsen

React，相比于Vue，React更加靈活，但是對(duì)JavaScript基礎(chǔ)的要求也更高一些。我繼續(xù)學(xué)習(xí)React

Antd

antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。

antd的使用:antd的官網(wǎng)有每一個(gè)組件的詳細(xì)使用代碼，下面簡單描述一下

安裝 npm install antd --save

樣式引入import ‘a(chǎn)ntd/dist/antd.css’;

eg 引入import { Input } from ‘a(chǎn)ntd’;

使用<Input placeholder={‘請(qǐng)輸入’}/>

TodoList 頁面布局

import React, {Component } from 'react' import 'antd/dist/antd.css' import { Input,Button, List } from 'antd';const data = ['Racing car sprays burning fuel into crowd.', ];class TodoList extends Component {render() {return(<div><div><Input placeholder="Todo info" style={{width:'300px',marginRight:'10px' }}></Input><Button type="primary">primary</Button></div><Listborderedstyle={{width:'300px',marginTop:'10px' }}dataSource={data}renderItem={item => (<List.Item>{item}</List.Item>)}/></div>)} }export default TodoList;

Redux

下面是網(wǎng)上廣為流傳的Redux流向圖，可以幫助我們更好地理解并使用。

首先，我們看下幾個(gè)核心概念：

• Store：保存數(shù)據(jù)的地方，你可以把它看成一個(gè)容器，整個(gè)應(yīng)用只能有一個(gè)Store。
• State：Store對(duì)象包含所有數(shù)據(jù)，如果想得到某個(gè)時(shí)點(diǎn)的數(shù)據(jù)，就要對(duì)Store生成快照，這種時(shí)點(diǎn)的數(shù)據(jù)集合，就叫做State。
• Action：State的變化，會(huì)導(dǎo)致View的變化。但是，用戶接觸不到State，只能接觸到View。所以，State的變化必須是View導(dǎo)致的。Action就是View發(fā)出的通知，表示State應(yīng)該要發(fā)生變化了。
• Action Creator：View要發(fā)送多少種消息，就會(huì)有多少種Action。如果都手寫，會(huì)很麻煩，所以我們定義一個(gè)函數(shù)來生成Action，這個(gè)函數(shù)就叫Action Creator。
• Reducer：Store收到Action以后，必須給出一個(gè)新的State，這樣View才會(huì)發(fā)生變化。這種State的計(jì)算過程就叫做Reducer。Reducer是一個(gè)函數(shù)，它接受Action和當(dāng)前State作為參數(shù)，返回一個(gè)新的State。
• dispatch：是View發(fā)出Action的唯一方法。

然后我們過下整個(gè)工作流程：

• 首先，用戶（通過View）發(fā)出Action，發(fā)出方式就用到了dispatch方法。
• 然后，Store自動(dòng)調(diào)用Reducer，并且傳入兩個(gè)參數(shù)：當(dāng)前State和收到的Action，Reducer會(huì)返回新的State
• State一旦有變化，Store就會(huì)調(diào)用監(jiān)聽函數(shù)，來更新View。

redux的安裝通過npm安裝的方式是：npm install redux --save

創(chuàng)建 redux 中的 store

創(chuàng)建reducer.js來創(chuàng)建state

index.js

import { createStore } from 'redux'; import reducer from './reducer';const store = createStore(reducer);export default store;

reducer.js

const defaultState = {inputValue : '123',list: ['1','2']}export default (state =defaultState , actions) => {return state; }

總結(jié)

以上是生活随笔為你收集整理的七十八、Antd 实现 TodoList 页面布局和Redux入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。