React17 入門
2021-11-09 06:54:22 企業開發
目錄
- ref
- 生命周期(針對于組件而言)
- Mounting 掛載順序
- Updation 更新順序
- Unmounting 卸載
- 注意
- CSSTransition 影片庫
- Ant Design UI庫
- Redux
- 安裝
- 原則
- 核心API
- 具體用法
- store/list.js
- store/actionCreator.js
- store/index.js
- store/reducer.js
- Redux-thunk中間件
- 安裝
- 使用
- store/index.js
- TodoList.js
- store/actionCreator.js
- store/reducer.js
- Redux-saga中間件
- 安裝
- 使用
- 1. 創建、使用、運行Redux-saga中間件
- 2. 創建sagas.js
- 3. action的統一管理
- 4. Reducer
- 5. List.js
- React-redux 第三方模塊
- 安裝
- 使用
- Provider組件
- connect連接store
- Reducer
查看 demo
ref
<div ref = {( box )=>{ this.box = box }}></div>
console.log(this.box); // 獲取dom
生命周期(針對于組件而言)
Mounting 掛載順序
constructor(props)：初始化 state 和 props 資料componentWillMount() 在組件即將被掛載到頁面時執行(16.3已廢棄)- 新增
static getDerivedStateFromProps(props, state)
render()：渲染組件componentDidMount()：在組件被掛載到頁面后執行，只在掛載時執行一次
Updation 更新順序
static getDerivedStateFromProps(props, state)shouldComponentUpdate()：在組件被更新之前執行 (return true 更新 , return false 不更新)render()： 渲染頁面static getSnapshotBeforeUpdate(prevProps, prevState)componentDidUpdate()：state或props更新后呼叫
Unmounting 卸載
componentWillUnmount() 在組件即將被頁面剔除時執行
注意
除了render函式，其他所有的生命周期函式都可以沒有
CSSTransition 影片庫
安裝
yarn add react-transition-group
使用
js
import { CSSTransition } from 'react-transition-group';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
};
}
render() {
return (
<div>
<CSSTransition in={this.state.show} timeout={1000} appear={true} unmountOnExit classNames="mydemo">
<p>hello</p>
</CSSTransition>
<button onClick={this.toggle.bind(this)}>提交</button>
</div>
);
}
toggle() {
this.setState(() => ({
show: !this.state.show,
}));
}
}
css
.mydemo-enter,
.mydemo-appear {
opacity: 0;
}
.mydemo-enter-active,
.mydemo-appear-active {
opacity: 1;
transition: opacity 1s ease-in;
}
.mydemo-enter-done {
opacity: 1;
}
.mydemo-exit {
opacity: 1;
}
.mydemo-exit-active {
opacity: 0;
transition: opacity 1s ease-in;
}
.mydemo-exit-done {
opacity: 0;
}
Ant Design UI庫
安裝
yarn add antd
使用
import { Input, Button, List } from 'antd';
import 'antd/dist/antd.css';
<Input placeholder="Basic usage"/>
<Button type="primary">提交</Button>
Redux
Redux = Reducer + Flux
安裝
yarn add redux
原則
- store是唯一的
- 只有store能改變自己的內容(store里的資料不是reducer更新的)
- reducer必須是純函式
核心API
- createStore (創建store)
- store.dispatch(action); (派發action給store)
- store.getState(); (獲取store中所有的資料)
- store.subscribe (監聽store，store發生改變時，自動觸發)
具體用法
store/list.js
import store from './store/index';
import { changeInputAction } from './store/actionCreator';
class List extends Component {
constructor(props) {
super(props);
this.state = store.getState();
store.subscribe(this.storeChange.bind(this)); // store發生改變時，自動觸發
}
render() {
return (
<div>
<input value=https://www.cnblogs.com/bingcola/archive/2021/11/08/{this.state.value} onChange={this.change.bind(this)} />
);
}
storeChange() {
this.setState(store.getState());
}
change(e) {
// const action = {
// type:'change_input',
// value: e.target.value,
// };
const action = changeInputAction(e.target.value);
store.dispatch(action);
}
}
export default NewTodoList;
store/actionCreator.js
action的統一管理
export const changeInputAction = value =https://www.cnblogs.com/bingcola/archive/2021/11/08/> ({
type:'change_input',
value,
});
store/index.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__());
export default store;
store/reducer.js
const defaultState = {
value: ''
};
export default (state = defaultState, action) => {
console.log(state, action);
let newState = JSON.parse(JSON.stringify(state)); // 深拷貝,不能直接修改state里的資料
if (action.type === 'change_input') {
newState.value = https://www.cnblogs.com/bingcola/archive/2021/11/08/action.value;
}
return newState;
};
Redux-thunk中間件
Redux-thunk可以使action可以回傳函式，從而在store/actionCreator.js中可以進行異步請求(axios)
安裝
npm install redux-thunk
或
yarn add redux-thunk
使用
store/index.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
// window.__REDUX_DEVTOOLS_EXTENSION__ 可使用Redux DevTools插件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
// 使用Redux-thunk中間件
const enhancer = composeEnhancers(applyMiddleware(thunk));
// 創建store
const store = createStore(reducer, enhancer);
export default store;
TodoList.js
import { Component, Fragment } from 'react';
import { List } from 'antd';
import store from './store/index';
import { getTodoList } from './store/actionCreator';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = store.getState();
// store.subscribe(this.storeChange.bind(this)); // store發生改變時，自動觸發
}
render() {
<Fragment>
<List bordered dataSource={this.state.list} renderItem={(item, index) => <List.Item> {item} </List.Item>} />
</Fragment>
}
componentDidMount() {
// 使用redux-thunk后，action可以回傳函式，用于進行異步請求(axios)
const action = getTodoList();
store.dispatch(action);
}
}
export default TodoList;
store/actionCreator.js
import axios from 'axios';
export const initListAction = list => ({
type: 'init_list',
list,
});
// 使用redux-thunk后，action可以回傳函式，用于進行異步請求(axios)
export const getTodoList = () => {
return dispatch => {
let list = [];
axios.get('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/getHotList').then(function (res) {
if (res.data.data.length > 0) {
for (const val of res.data.data) {
list.push(val.name);
}
}
const action = initListAction(list);
dispatch(action); // 將action傳給store
});
};
};
store/reducer.js
const defaultState = {
list: []
};
export default (state = defaultState, action) => {
console.log(state, action);
let newState = JSON.parse(JSON.stringify(state)); // 深拷貝,不能直接修改state里的資料
if (action.type === 'init_list') {
newState.list = action.list;
}
return newState;
};
Redux-saga中間件
安裝
npm install redux-saga --save
或
yarn add redux-saga
使用
1. 創建、使用、運行Redux-saga中間件
src/store/index.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducer';
import sagas from './sagas'; // 創建sagas.js
// window.__REDUX_DEVTOOLS_EXTENSION__ 可使用Redux DevTools插件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
// 創建Redux-saga中間件
const sagaMiddleware = createSagaMiddleware();
// 使用Redux-thunk中間件、Redux-saga中間件
const enhancer = composeEnhancers(applyMiddleware(thunk, sagaMiddleware));
// 創建store
const store = createStore(reducer, enhancer);
// 運行saga中間件
sagaMiddleware.run(sagas);
export default store;
2. 創建sagas.js
src/store/sagas.js
import { put, takeEvery } from 'redux-saga/effects';
import axios from 'axios';
import { initListAction } from './actionCreator';
// generator 函式
function* mySaga() {
// 接收 store.dispatch() 傳過來的action
// 接收到get_init_list的action后，會呼叫getInitList方法
// getInitList可以執行異步操作
yield takeEvery('get_init_list', getInitList);
}
function* getInitList() {
let list = [];
const res = yield axios.get('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/getHotList'); // 等待axios請求結束后，直接將結果賦值給res
if (res.data.data.length > 0) {
for (const val of res.data.data) {
list.push(val.name);
}
}
const action = initListAction(list);
yield put(action); // 類似于store.dispatch(action);
}
export default mySaga;
3. action的統一管理
src/store/actionCreator.js
export const initListAction = list => ({
type: 'init_list',
list,
});
4. Reducer
src/store/reducer.js
const defaultState = {
list: [],
};
export default (state = defaultState, action) => {
let newState = JSON.parse(JSON.stringify(state)); // 深拷貝,不能直接修改state里的資料
if (action.type === 'init_list') {
newState.list = action.list;
}
return newState;
};
5. List.js
import { Component, Fragment } from 'react'; // 占位符
import store from './store/index';
import { List } from 'antd';
import 'antd/dist/antd.css';
class NewTodoList extends Component {
constructor(props) {
super(props);
this.state = store.getState();
store.subscribe(this.storeChange.bind(this)); // store發生改變時，自動觸發
}
render() {
return (
<Fragment>
<List bordered dataSource={this.state.list} renderItem={(item, index) => <List.Item> {item} </List.Item>} />
</Fragment>
);
}
componentDidMount() {
const action = {
type: 'get_init_list',
};
store.dispatch(action); // action不僅會被reducer接收，還會被redux-saga接收
}
storeChange() {
this.setState(store.getState());
}
}
export default NewTodoList;
React-redux 第三方模塊
安裝
npm install react-redux --save
或
yarn add react-redux
使用
Provider組件
provider包裹在根組件外層，使所有的子組件都可以拿到state
- Provider連接了store
- Provider內部的所有組件都可以使用store
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import store from './store';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
reportWebVitals();
connect連接store
- mapStateToProps: 把state資料映射到props中,這樣在jsx中就可以用this.props.value來代替this.state.value獲取值
- mapDispatchToProps: 把store.disptch()掛載到props上,這樣在jsx中就可以用this.props.changeInput來代替store.disptch()改變store里的資料
src/List.js
import { Component, Fragment } from 'react';
import { connect } from 'react-redux';
class List extends Component {
render() {
return (
<Fragment>
<div>
<label htmlFor="input">輸入內容</label>
<input id="input" type="text" value=https://www.cnblogs.com/bingcola/archive/2021/11/08/{this.props.value} onChange={this.props.changeInput} />
);
}
}
// 把state資料映射到props中
// 這樣在jsx中就可以用this.props.value來代替this.state.value獲取值
const mapStateToProps = state => {
return {
value: state.value,
};
};
// 把store.disptch()掛載到props上
// 這樣在jsx中就可以用this.props.changeInput來代替store.disptch()改變store里的資料
const mapDispatchToProps = disptch => {
return {
changeInput(e){
const action = {
type:'change_input',
value: e.target.value,
};
disptch(action);
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(List); // List連接store
