欢迎光临
我的个人博客网站

React17 入门

目录

查看 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, action) => {     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, 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

  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, action) => {     let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据     if (action.type === 'change_input') {         newState.value = action.value;     }     return newState; };  
赞(0) 打赏
未经允许不得转载:张拓的天空 » React17 入门
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏