0
点赞
收藏
分享

微信扫一扫

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中间件​​
  • ​​安装​​
  • ​​使用​​
  • ​​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 挂载顺序

  1. ​constructor(props)​​:初始化 state 和 props 数据
  2. componentWillMount() 在组件即将被挂载到页面时执行(16.3已废弃)
  3. 新增​​static getDerivedStateFromProps(props, state)​
  4. ​render()​​:渲染组件
  5. ​componentDidMount()​​:在组件被挂载到页面后执行,只在挂载时执行一次

Updation 更新顺序

  1. ​static getDerivedStateFromProps(props, state)​
  2. ​shouldComponentUpdate()​​:在组件被更新之前执行 (return true 更新 , return false 不更新)
  3. ​render()​​: 渲染页面
  4. ​static getSnapshotBeforeUpdate(prevProps, prevState)​
  5. ​componentDidUpdate()​​:state或props更新后调用

Unmounting 卸载

  1. ​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​

原则

  1. store是唯一的
  2. 只有store能改变自己的内容(store里的数据不是reducer更新的)
  3. reducer必须是纯函数

核心API

  1. createStore (创建store)
  2. store.dispatch(action); (派发action给store)
  3. store.getState(); (获取store中所有的数据)
  4. 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={this.state.value} onChange={this.change.bind(this)} />
</div>
);
}
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 => ({
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,) => {
console.log(state, action);
let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
if (action.type === 'change_input') {
newState.value = 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,) => <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,) => {
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,) => {
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,) => <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

  1. Provider连接了store
  2. 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

  1. mapStateToProps: 把state数据映射到props中,这样在jsx中就可以用this.props.value来代替this.state.value获取值
  2. 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={this.props.value} onChange={this.props.changeInput} />
</div>
</Fragment>
);
}
}

// 把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

Reducer

​src/store/reducer.js​

const defaultState = {
value: ''
};

export default (state = defaultState,) => {
let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
if (action.type === 'change_input') {
newState.value = action.value;
}
return newState;
};


举报

相关推荐

0 条评论