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

@Author：Runsen

React，相比于Vue，React更加靈活，但是對JavaScript基礎的要求也更高一些。我繼續學習React

Antd

antd 是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品。

antd的使用:antd的官網有每一個組件的詳細使用代碼，下面簡單描述一下

安裝 npm install antd --save

樣式引入import ‘antd/dist/antd.css’;

eg 引入import { Input } from ‘antd’;

使用<Input placeholder={‘請輸入’}/>

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

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

首先，我們看下幾個核心概念：

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

然后我們過下整個工作流程：

• 首先，用戶（通過View）發出Action，發出方式就用到了dispatch方法。
• 然后，Store自動調用Reducer，并且傳入兩個參數：當前State和收到的Action，Reducer會返回新的State
• State一旦有變化，Store就會調用監聽函數，來更新View。

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

創建 redux 中的 store

創建reducer.js來創建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; }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。