React17 入門

目錄

ref

生命周期(針對于元件而言)

Mounting 挂載順序

Updation 更新順序

Unmounting 解除安裝

注意

CSSTransition 動畫庫

安裝

使用

Ant Design UI庫

Redux

原則

核心API

具體用法

store/list.js

store/actionCreator.js

store/index.js

store/reducer.js

Redux-thunk中間件

TodoList.js

Redux-saga中間件

1. 建立、使用、運作Redux-saga中間件

2. 建立sagas.js

3. action的統一管理

4. Reducer

5. List.js

React-redux 第三方子產品

Provider元件

connect連接配接store

Reducer

檢視 demo

<code>constructor(props)</code>：初始化 state 和 props 資料

<code>componentWillMount()</code> 在元件即将被挂載到頁面時執行(16.3已廢棄)

新增 <code>static getDerivedStateFromProps(props, state)</code>

<code>render()</code>：渲染元件

<code>componentDidMount()</code>：在元件被挂載到頁面後執行，隻在挂載時執行一次

<code>static getDerivedStateFromProps(props, state)</code>

<code>shouldComponentUpdate()</code>：在元件被更新之前執行 (return true 更新 , return false 不更新)

<code>render()</code>： 渲染頁面

<code>static getSnapshotBeforeUpdate(prevProps, prevState)</code>

<code>componentDidUpdate()</code>：state或props更新後調用

<code>componentWillUnmount()</code> 在元件即将被頁面剔除時執行

除了render函數，其他所有的生命周期函數都可以沒有

<code>yarn add react-transition-group</code>

js

css

<code>yarn add antd</code>

<code>Redux = Reducer + Flux</code>

<code>yarn add redux</code>

store是唯一的

隻有store能改變自己的内容(store裡的資料不是reducer更新的)

reducer必須是純函數

createStore (建立store)

store.dispatch(action); (派發action給store)

store.getState(); (擷取store中所有的資料)

store.subscribe (監聽store，store發生改變時，自動觸發)

action的統一管理

<code>Redux-thunk</code>可以使<code>action</code>可以傳回函數，進而在<code>store/actionCreator.js</code>中可以進行異步請求(axios)

<code>npm install redux-thunk</code>

或

<code>yarn add redux-thunk</code>

<code>npm install redux-saga --save</code>

<code>yarn add redux-saga</code>

<code>src/store/index.js</code>

<code>src/store/sagas.js</code>

<code>src/store/actionCreator.js</code>

<code>src/store/reducer.js</code>

<code>npm install react-redux --save</code>

<code>yarn add react-redux</code>

provider包裹在根元件外層，使所有的子元件都可以拿到state

Provider連接配接了store

Provider内部的所有元件都可以使用store

<code>src/index.js</code>

mapStateToProps: 把state資料映射到props中,這樣在jsx中就可以用this.props.value來代替this.state.value擷取值

mapDispatchToProps: 把store.disptch()挂載到props上,這樣在jsx中就可以用this.props.changeInput來代替store.disptch()改變store裡的資料

<code>src/List.js</code>