【温故知新】—— React/Redux/React-router4基础知识&独立团Demo

Z时代
2024-01-10
分类：综合

react

前言：React专注View层，一切皆组件；全部使用ES6语法，最新版本为React16。

Redux是专注于状态管理的库，和react解耦；单一状态，单向数据流。【独立团github地址】

一、React基础知识

React基础语法

import React

class语法新建组件，render里直接使用

render函数返回值就是输出JSX语法，会把JSX转成js执行

React的View层语法

JS里直接写html

Class里要写成className

变量用{ }包裹即可

React的Api

一切都是组件

类实现组件，使用JSX语法

组件间通信通过属性props传递

使用<组件数据='值' >的形式传递

组件里使用this.props获取值

如果组件只有render函数，还可以用函数的形式写组件

组件内部通过state管理状态

JSX本质就是js，所以直接数组.map渲染列表，【注意列表项必需有唯一key】

Constructor构造函数设置组件初始状态，记得执行super(props)

State就是一个不可变的对象，使用this.state获取

通过this.setState修改，不能直接修改

onClick点击事件

JSX里，onClick={this.函数名}来绑定事件

this引用的问题，需要在构造函数里用bind绑定this，或者箭头函数直接绑定

this.setState修改state，记得返回新的state，而不是修改

React生命周期

初始化周期

组件重新渲染生命周期

组件卸载声明周期

独立团Demo

import React from 'react';
class App extends React.Component{
      render(){
         let boss = '李云龙'
         return (
            <div>
               <h2>独立团，团长{boss}</h2>
               <FirstYin leader='张大喵'></FirstYin>
               <Squadron leader='孙德盛'></Squadron>
            </div>
         )
      }
}
function Squadron(props){
   return <h2>骑兵连连长{props.leader},冲啊！</h2>
}
class FirstYin extends React.Component{
   constructor(props) {
     super(props)
     this.state = {
       solders: ['虎子', '柱子', '王根生']
     }
     // this.addSolder = this.addSolder.bind(this)
   }
   componentWillMount(){
     console.log('组件马上就要加载了')
   }
   componentDidMount(){
    console.log('组件加载完成了')
   }
   addSolder = () => {
     console.log('hello add solder')
     this.setState({
       solders: [...this.state.solders, '新兵蛋子编号：'+Math.random()]
     })
   }
   render(){
      console.log('组件正在加载')
      return (
         <div>
            <h2>一营营长，{this.props.leader}</h2>
            <button onClick={this.addSolder}>新兵入伍</button>
            <ul>
              {this.state.solders.map(solder => {
                  return <li key={solder}>{solder}</li>
               })}
            </ul>
         </div>
      )
   }
}
export default App;

二、Redux基础知识

Redux核心概念

Store：保存数据的容器，一个应用只能有一个Store。Redux提供createStore函数，创建Store

import {createStore} from 'redux';
const store = createStore(fun); //createStore的参数为reducer函数

State：数据状态。Store在某一时刻的状态，可以通过store.getState()获取到。
```
const state = store.getState(); 
```

Action：Redux改变state必需通过Action，实际上是一个JSON对象，该对象必须包含type属性，表示Action的名称。

//该函数不需要主动去调用,事实上我们在store.dispatch的时候，会自动触发。
const action = {
    type: 'ADD',   //action名称
    val: 5         //携带数据
};

Action Creator：Action生成函数，用于创建Action，类似于工厂模式。若不使用，需要写很多Action。

function createAdd(number) {
    return {
        type: 'ADD',
        val: number
    }
}
const action = createAdd(5);

store.dispatch(action)：View用于触发数据变化的唯一方式

import {createStore} from 'redux';
const store = createStore(fun);
store.dispatch({   //state+5
    type: 'ADD',
    val: 5
});

Reducer：Action改变数据状态需要遵守的规律函数。

const defaultState = 0;
//这里的reducer不需要主动去调用，我们只需要向容器中丢一块砖头（store.dispatch(action)），它会自动触发该方法
const reducer = (state = defaultState, action) => {
    switch (action.type) {
        case 'ADD':
            return state + action.val;
        case 'DEC':
            return state - action.val;
        default:
            return state;
    }
};

注意：Reducer是一个纯函数，纯函数的要求之一是不能改写参数

// 参数state和action是固定的
function reducer(state, action) {
    let newSate = {}; 
    return { ...state, ...newSate}
}

store.subscribe(listener)：监听函数；会返回一个解除函数，调用该解除函数，就不再监听了

import { createStore } from 'redux';
const store = createStore(reducer);
let unsubscribe = store.subscribe(listener);  //监听
unsubscribe();  //解除监听

官方Demo

import { createStore } from 'redux';
/**
 * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 *
 * state 的形式取决于你，可以是基本类型、数组、对象、
 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
 * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
 *
 * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
 * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
 */
function reducer(state = 0, action) {
    switch (action.type) {
        case 'ADD':
            return state + action.val;
        case 'DES':
            return state - action.val;
        default:
            return state;
    }
}
// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(reducer);
// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() =>
    console.log("听到状态变化了：" + store.getState())
);
// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: 'ADD', val: 10 });
// 10
store.dispatch({ type: 'ADD', val: 20 });
// 30
store.dispatch({ type: 'DES', val: 30 });
// 0

Redux单独使用

src->index.js中：所有状态归redux管理（组件只负责view显示）

reducer新建store，随时通过store.getState获取状态

import {createStore} from 'redux'
//通过reducer
//根据老的 state和 action 生成新的state
function counter(state=0, action){
    switch(action.type){
        case 'Add_GUN':
          return state+1
        case 'REMOVE_GUN':
          return state-1
        default:
          return 10
    }
}
//1、新建store
const store = createStore(counter)
const init = store.getState()
console.log(init) //10

需求状态变更，store.dispatch(action)来修改状态

//2、派发事件 传递action
store.dispatch({type: 'Add_GUN'})
store.dispatch({type: 'REMOVE_GUN'})

reducer函数接收state和action，返回新的state，可以用store.subscribe监听每次修改

//定义事件方法
function listener(){
    const current = store.getState();
    console.log(`现在有机枪${current}把`)
}
//3、监听事件
store.subscribe(listener)

安装redux
```
yarn add redux --sav
```

启动项目
```
yarn start
```

Redux和React一起用（手动连接）

Redux相关内容，移到单独的文件index.redux.js单独管理：reducer+action

//action type
const Add_GUN = '加机关枪'
const REMOVE_GUN = '减机关枪'
//reducer
export function counter(state=0, action){
    switch(action.type){
        case Add_GUN:
          return state+1
        case REMOVE_GUN:
          return state-1
        default:
          return 10
    }
}
//action creator
export function addGUN(){
    return {type: Add_GUN}
}
export function removeGUN(){
    return {type: REMOVE_GUN}
}

App.js中：把store.dispatch方法传递给组件，内部可以调用修改状态

import React from 'react';
class App extends React.Component{
      render(){
         const store = this.props.store
         const num = store.getState()
         const addGUN = this.props.addGUN
         const removeGUN = this.props.removeGUN
         return (
            <div>
               <h3>现在有机枪{num}把</h3> 
            </div>
         )
      }
}
export default App;

index.js中：Subscribe订阅render函数，每次修改都重新渲染

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore} from 'redux'
import {counter, addGUN, removeGUN} from './index.redux'
const store = createStore(counter)
function render(){
    ReactDOM.render(<App store={store} addGUN={addGUN} removeGUN={removeGUN}/>, document.getElementById('root'));
}
render()
store.subscribe(render)

Redux处理异步

Redux默认只处理同步，异步任务需要react-thunk中间件

安装插件
```
npm install redux-thunk --save　　
```

index.js中：使用applyMiddleware开启thunk中间件

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {addGunAsync} from './index.redux'
const store = createStore(counter, applyMiddleware(thunk))

index.redux.js中：Action可以返回函数，使用dispatch提交action

//（模拟）异步函数提交dispatch
export function addGunAsync(){
    return dispatch => {
        setTimeout(() => {
           dispatch(addGUN())
        }, 2000)
    }
}

App.js中：把store.dispatch方法传递给组件，内部可以调用修改状态

import React from 'react';
class App extends React.Component{
      render(){
         const store = this.props.store
         const num = store.getState()
         const addGunAsync = this.props.addGunAsync
         return (
            <div>
               <h3>现在有机枪{num}把</h3> 
               <button onClick={() => store.dispatch(addGunAsync())}>拖两天再给</button>
            </div>
         )
      }
}

Redux调试工具

火狐搜索redux安装

项目本地安装

npm install redux-devtools-extension --save

新建store的时候判断window.decToolsExtension

使用compose组合函数结合thunk和window.devToolsExtension

import {createStore, applyMiddleware, compose} from 'redux'
const store = createStore(counter, compose(
      applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f => f
))

调试窗的redux选项卡，实时看到state

使用React-redux优雅的链接react和redux

安装react-redux
```
npm install react-redux --save
```

忘记subscribe，记住reducer，action和dispatch即可

React-redux提供Provider和connect两个接口来链接

index.js中：Provider组件在应用最外层，传入store即可，只用一次

import {Provider} from 'react-redux'
import {counter} from './index.redux'
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Connect负责从外部获取组件需要的参数（mapStateToProps, actionCreators）

import React from 'react';
import {connect} from 'react-redux'
import {addGUN, removeGUN, addGunAsync } from './index.redux'
class App extends React.Component{
      render(){
          return (
            <div>
               <h3>现在有机枪{this.props.num}把</h3> 
               <button onClick={this.props.addGUN}>申请武器</button>
               <button onClick={this.props.removeGUN}>上交武器</button>
               <button onClick={this.props.addGunAsync}>拖两天再给</button>
            </div>
         )
      }
}
const mapStateToProps = (state) => {
   return {
      num: state
   }
}
const actionCreators = {addGUN, removeGUN, addGunAsync}
App = connect(mapStateToProps, actionCreators)(App) 
export default App;

Connect可以用装饰器的方式来优化

弹出个性化配置
```
npm run eject
```

安转专门支持装饰器的插件

npm install babel-plugin-transform-decorators-legacy --save-dev

Package.json里babel加上plugins配置

"plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
]

优化connect

import React from 'react';
import {connect} from 'react-redux'
import {addGUN, removeGUN, addGunAsync } from './index.redux'
@connect(
    state => ({num: state})
   {addGUN, removeGUN, addGunAsync}
)  //使用装饰器方法优化connect
class App extends React.Component{
      render(){
          return (
            <div>
               <h3>现在有机枪{this.props.num}把</h3> 
               <button onClick={this.props.addGUN}>申请武器</button>
               <button onClick={this.props.removeGUN}>上交武器</button>
               <button onClick={this.props.addGunAsync}>拖两天再给</button>
            </div>
         )
      }
}
export default App;

三、React-router4基础知识

React-router4

React官方推荐路由库，4是最新版本，和之前版本不兼容，浏览器和RN均兼容

React开发单页应用必备，践行路由即组件的概念

核心概念：动态路由、Route、Link、Switch

Web中应用React-router：安装react-router-dom作为前端路由
```
npm install react-router-dom --save
```

入门组件

BrowserRouter包裹整个应用

Router路由对应渲染的组件，可嵌套

Link跳转专用

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Link} from 'react-router-dom'
function Yiying(){
    return <h2>一营</h2>
}
function Erying(){
    return <h2>二营</h2>
}
function Qibinglian(){
    return <h2>骑兵连</h2>
}
ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <ul>
                    <li>
                        <Link to='/'>一营</Link>  //点击跳到指定路由
                    </li>
                </ul>
                <ul>
                    <li>
                        <Link to='/erying'>二营</Link>
                    </li>
                </ul>
                <ul>
                    <li>
                        <Link to='/qibinglian'>骑兵连</Link>
                    </li>
                </ul>
                <Route path='/' exact component={Yiying}></Route>  //exact表明路由完全匹配
                <Route path='/erying' component={Erying}></Route>
                <Route path='/qibinglian' component={Qibinglian}></Route> //路由对应渲染模板
            </div>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

其它组件

url参数，Route组件参数可用冒号标识参数

<Route path='/:location' component={Test}></Route>

Redirect组件跳转

<Redirect to='/qibinglian'></Redirect>

Switch只渲染命中的第一个子Route组件

<Switch>
       <Route path='/' exact component={Yiying}></Route>
       <Route path='/erying' component={Erying}></Route>
       <Route path='/qibinglian' component={Qibinglian}></Route>
</Switch>

和Redux配合

复杂redux应用，多个reducer，用combineReducers合并

index.js中：引入合并后的reducer，并注入createStore中

import reducers from './reducer'  //合并后的reducer
const store = createStore(reducers, compose(
      applyMiddleware(thunk),
      window.devToolsExtension ? window.devToolsExtension() : f => f
))

reducers.js中：合并所有reducer，并返回

/**
 * 合并所有reducer 并且返回
 */
import {combineReducers} from 'redux'
import {counter} from './index.redux'
import {auth} from './Auth.redux'
export default combineReducers({counter, auth})

Redirect组件跳转

return this.props.isAuth ? app : <Redirect to='/login'></Redirect>

Switch只渲染一个子Route组件

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <Switch>
                <Route path='/login' component={Auth}></Route>
                <Route path='/dashboard' component={Dashboard}></Route>
                <Redirect to='/dashboard'></Redirect>
            </Switch> 
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);