三年 Vue 跑来学习 React，确实有点难

一、前言

本人 22 届的，21年参加工作，满打满算也快三年了😁😁

平常主要的技术栈是 vue。之所以跑来学习 React，是因为公司在使用一款 sciter 开发一些应用。

不知道 sciter 可以点击这里了解一下（跟 electron 类似，ToDesk 应用就是使用这个框架开发的）

由于没有现成的组件库，所以需要内部自行开发。组件都偏向于 JXS 编程。故过来学习一下 React 及 其 React 周边框架。

之前也有了解学过一些但都没怎么实践过。内容如有不对，也请掘友们指出，谢谢。

接下来进入正文。。。。

二、基本使用

1、✍️ 创建项目

• 创建 React 项目（ npx create-react-app demo）
• 进入 React 项目目录（cd demo）
• 启动 React 项目（npm run start）

2、✍️ 基本语法及注意事项

src 创建入口 index.js

import ReactDOM from "react-dom";
import App from './App'
// ReactDOM.render(组件名称，要注入的元素)
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

src 创建组件 App.jsx

import React from 'react'
const title = "你好世界"
// 类组件
export default class App extends React.Component {
   render(){
     return (
       <div>
         <h2>{title}</h2>
       </div>
     )
   }
}
export default App

3、✍️ React 使用上的区别

3.1、✨ 渲染方面`

import React from 'react';
const msg = "你好世界"
const mystyle = {backgroundColor: 'red'}
let flag = true;
let arr  = ["刘备", "关羽", "张飞"]
export default class App extends React.Component {
  render() {
    return (
      <>
        <h2>{msg}</h2>
       
        {/* 不能使用 for 改成 htmlFor */}
        <label htmlFor="username"></label>
        <input type="text" id="username"/>

        {/* 不能使用 class 改成 className */}
        <div className="box"></div>
       
        {/* 双括号 */}
        <div style={{backgroundColor: 'red'}}>内容</div>
        {/* 单括号 */}
        <div style={mystyle}>内容</div>
        {/* 三元运算符 */}
        <div style={{backgroundColor: flag? 'green':'red'}}>内容</div>
         {/* 循环 */}
        <ul>
          {
            {/* 只能使用 map 不能使用 forEach (forEach 没有返回值，而 map 有返回值) */}
            arr.map((item, index) => <li key={index}>{item}</li>)
          }
        </ul>
      </>
    )
  }
}

3.2、✨ 事件方面

import React, { Component } from 'react'
export default class App extends Component {
 constructor(props){
   super(props);
   // 状态管理
   this.state = {
     num: 1
   }
 }
  render() {
    return (
     <>
      <h2>{this.state.num}</h2>
      {/* 方式一：普通 */}
      <button onClick={()=>this.setState({num: this.state.num + 1})}>按钮1 - 累加</button>
      {/* 方式二：需要改变 this 指向，否则 this 为空 */}
      <button onClick={this.addNum.bind(this)}>按钮2 - 累加</button>
      {/* 方式三：箭头函数 */}
      <button onClick={() =>this.addNum()}>按钮3 - 累加</button>
     </>
    )
  }
  addNum(){
      // 修改状态
      this.setState({num: this.state.num + 1})
  }
}

3.3、✨ 通信方面

父 =》子

import React, { useState } from 'react' 
function Child(props) { 
    return <h2>子组件{props.num}</h2> 
} 

export default function Father() { 
    return <Child num={123}/> 
}

子 =》父

function Child(props) {
    return (
       <>
         <h2>子组件{props.num}</h2>
         <button onClick={()=>props.changeNum(321)}></button>
       </>
    )
}

export default function Father() {
  const [num, setNum] = useState(123)
  // 提供给子组件用来修改 num 的函数
  const changeNumFn = (num) => setNum(num)
  return <Child num={num} changeNum={changeNumFn}/>
}

跟 Vue 不同的地方是：

• 父传子没太大区别
• 子传父：
  • Vue 是通过触发器将值传出，父组件对子组件进行监听
  • React 是将处理函数传递给子组件

跨代传值

import React, { useState, createContext } from 'react'

// 创建上下文空间 （Provider 提供者，Consumer 消费者）
const NumContext = createContext()

function Child() {
     return (
         <NumContext.Consumer>
            {
              ({num, setNum})=>{
                  return (
                     <>
                       <h2>子组件{num}</h2>
                       <button onClick={()=>setNum(456)}>修改Num</button>
                     </>
                  )
              }     
            }
         </NumContext.Consumer>
     )
}

const Father() => <Child />

// 顶级组件
export default function App() {
    const [num, setNum] = useState(123);
    return (
        {/* 透传 */}
        <NumContext.Provider value={{num, setNum}}>
             <Father>
        </NumContext.Provider>
    )
}

3.4、✨ 生命周期

挂载完成 mounted

import React from 'react'
import { useEffect } from 'react'
export default function App() {
   // Hook 只能用在组件函数中的最顶层 
   useEffect(() => {
    // 这里主要用于发送 axios 请求
    console.log("挂载完成")
  })
}

数据更新 update

import React from 'react'
import { useState, useEffect } from 'react'
export default function App() {
  const [num1, setNum1] = useState(1);
  const [num2, setNum2] = useState(1); 
   // 监听一个数据
   useEffect(() => {
       console.log('num1更新')
   }, [num1])
    
   // 监听多个数据
   useEffect(() => {
    console.log('更新')
  }, [num1, num2])
    
  // 监听所有
  useEffect(() => {
    console.log('更新')
  })
   
  // 不监听
  useEffect(() => {
    console.log('更新')
  }, [])
}

销毁前 beforeDestroy

import React from 'react'
import { useEffect } from 'react'
export default function App() {
  useEffect(()=>{
      return () => {
        console.log('销毁阶段');
      }
  })
}

组件这部分写得比较简单😂😂，只了解了几个比较常用的钩子。实际 React 生命周期函数也是很丰富的，如后面有时间会加深这部分的了解。

三、高阶组件

下面例子是获取鼠标移动位置，将这部分逻辑进行抽离

1、✍️ Props 和 Render 抽离公共逻辑

import React, { Component } from 'react'
export default class App extends Component {
  state = { position: { x: 0, y: 0 } }
  
  // 去处理一些公共逻辑
  mousemove = (event) => {
    this.setState({ position: { x: event.clientX, y: event.clientY } });
  }
  
  render() {
    <div onMousemove={this.mousemove}>{this.props.render(this.state)}</div>
  }
}

const MouseComponentRP = (props) => {
    return (
        <RPFactory render={
            (props) => <div style="width: 300px; height: 300px; background:yellow;">x:{props.position.x} - y:{props.position.y}</div>
        } />
    )
}

2、✍️ 使用 HOC 抽离公共逻辑

import React, { Component } from 'react'
export const HOCFactory = (Component) => {
  class HOC extends Component {
      state = { position: { x: 0, y: 0 } }
      
      // 去处理一些公共逻辑
      mousemove = (event) => {
        this.setState({
            position: {
                x: event.clientX,
                y: event.clientY
            }
        });
      }
      
      render() {
            return (
                <div class="hoc-factory" onMousemove={this.mousemove}>
                    <Component {...this.props} position={this.state.position} />
                </div>
            )
      }
  }
  return HOC
}

class MouseComponentOne extends Component {
    render() {
        return (
            <div style="width: 300px; height: 300px; background:red;">
               x:{this.props.position.x} - y:{this.props.position.y}
            </div>
        )
    }
}
export const MouseComponentHOC = HOCFactory(MouseComponentOne);

四、React 周边框架

1、✍️ Redux 与 react-redux 使用

1.1、✨ 创建 store

import { createStore } from 'redux';

const defaultState = {
    language: 'zh',
    languageList: [
        { name: '中文', code: 'zh' },
        { name: '英文', code: 'en' }
    ]
}

const reducer = (state = defaultState, action) => {
    switch (action.type) {
        case "change_language":
            return { ...state, language: action.payload };
        default:
            return state
    }
}

const store = createStore(reducer);
export default store;

注意

• 参数 state 是旧数据
• 在 redux 中 不能直接修改参数 state , 其 state 是 immutable（不可修改的），需要将参数 state 赋值给一个新对象，在该新对象对状态进行修改。

1.2、✨ 入口文件导入 store

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

1.3、✨ 在类组件中使用

import { connect } from 'react-redux';

// 将 store 中的数据注入到 props 
const mapStateTopProps = (state) => {
    return {
        language: state.language,
        languageList: state.languageList
    }
}

// 将 dispatch 导入到 props
const mapDispatchToProps = (dispatch) {
    return {
        changeLanguage: (code) => {
            const action = {
                type: "change_language",
                payload: code
            }
            dispatch(action);
        }
    }
}

class HeaderComponent extends React.Component {

    menuClickHander = (e) => {
        this.props.changeLanguage(e.key);
    }

    render() {
        return (
            <div className="header">
                <Dropdown.Button
                    overlay={
                        <Menu onClick={() => this.menuClickHander} items={this.props.languageList.map(l => { return { key: l.code, label: l.name } })} />
                    }>{this.props.language === 'zh' ? '中文' : 'English'}</Dropdown.Button>
            </div>
        )
    }
}
export const HeaderClass = connect(mapStateTopProps, mapDispatchToProps)(HeaderComponent);

1.4、✨ 函数组件中使用

import { useSelector, useDispatch } from 'react-redux';
const HeaderFC = () => {
    // 获取 store 数据
    const language = useSelector(state => state.language);
    const languageList = useSelector(state => state.languageList);

    const dispatch = useDispatch();

    const menuClickHander = (e) => {
        const action = {
            type: 'change_labguage',
            payload: e.key
        }
        dispatch(action);
    }

    return (
        <div className="header">
            <Dropdown.Button
                overlay={ <Menu 
                            onClick={() => this.menuClickHander} 
                            items={languageList.map(l => { return { key: l.code, label: l.name } })} />
                }>{language === 'zh' ? '中文' : 'English'}
                </Dropdown.Button>
        </div>
    )
}
 export default HeaderFC;

2、✍️ Redux-toolkit 、React-redux、Redux-persist

实现 store 数据持久化

2.1、✨ store 入口文件（redux/index.js）

// 导入各个模块的 reducer
import global from './modules/global';
import auth from './modules/auth';

import reduxThunk from "redux-thunk";
import reduxPromise from "redux-promise";

import { configureStore, combineReducers } from "@reduxjs/toolkit";

const reducer = combineReducers({
    global,
    auth
});

// 持久化 reducer 配置
const persistConfig = {
    key: "redux-state",
	storage: storage
}
const persistReducerConfig = persistReducer(persistConfig, reducer);

// redux middleWares
const middleWares = [reduxThunk, reduxPromise];

// 创建 store
export const store = configureStore({
	reducer: persistReducerConfig,
	middleware: middleWares,
	devTools: true
});

// 创建持久化 store
export const persistor = persistStore(store);

2.2、✨ 创建模块

global 模块（redux/modules/global.js）

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
const globalState = {
    themeConfig: {
        // 默认 primary 主题颜色
        primary: "#1890ff",
        // 深色模式
        isDark: false,
        // 色弱模式(weak) || 灰色模式(gray)
        weakOrGray: "",
        // 面包屑导航
        breadcrumb: true,
        // 标签页
        tabs: true,
        // 页脚
        footer: true
    }
    // ....
}

const globalSlice = createSlice({
    name: 'global',
    initialState: globalState,
    reducers: {
        setThemeConfig(state, {payload}) {
            state.themeConfig.isDark = payload;
        }
    }
});

export const { setThemeConfig } = globalSlice.actions;
export default globalSlice.reducer;

2.3、✨ 对 reudx 进行注册

import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "@/redux/index.js";
ReactDOM.render(
   <Provider store={store}>
        <PersistGate persistor={persistor}>
            <App />
        </PersistGate> 
   </Provider>,
   document.getElementById("root")
)

2.4、 ✨ 使用 redux

创建修改主题色组件

import { useDispatch, useSelector } from "react-redux";
import { setThemeConfig } from "@/redux/modules/global";

const SwitchDark = () => {
    const themeConfig = useSelector(state => state.global.themeConfig);
    const dispatch = useDispatch();
    const onChange = () => {
        dispatch(setThemeConfig(!themeConfig.isDark))
    }
    return (
       <Switch
            className="dark"
            defaultChecked={themeConfig.isDark}
            checkedChildren={<>🌞</>}
            unCheckedChildren={<>🌜</>}
            onChange={onChange}
	   />
    )
}

3、✍️ Vuex 与 Redux 的区别

3.1、✨ Redux 工作流程

• 首先，用户（通过 view）发送 Action，发送方式就用到了 dispatch 方法。
• 然后，Store 自动调用 Reducer，并传入俩个参数，当前 State 和 收到的 Action。而 Reducer 会返回新的 State。
• 最后，Store 根据接收到的 State，判断是否发生变化。一旦发生变化，Store 中的数据会进行更新。
• 同时，Store 会回调监听函数，来更新 View（外部通过subscribe 来订阅事件）

store 类似于 数据存储中心

但是他要更改数据的时候不能直接修改，数据修改更新的角色由Reducers来担任，store只做存储

3.2、 ✨ Vuex 工作流程

• Vuex 由于 Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可
• Vuex 改进了Redux中的 Action 和 Reducer 函数，以 mutations 变化函数取代Reducer，无需switch，只需在对应的 mutation函数 里改变 state 值即可
• Vuex 数据流的顺序是∶View 调用 store.commit 提交对应的请求到 Store 中对应的mutation函数->store 改变（vue检测到数据变化自动渲染）

4、✍️ React-router-dom 使用

之前了解过 # react-router-dom 路由系统

五、总结

花了一个多星期学了 React 及其周边框架的基本使用。最大的感受是相比较下 Vue 会提供很多 API 去供开发者使用，而 React 更多的是自力更生，比较考验 JavaScript 的编程功底。

vue 和 React 各有千秋，都有各自的优势。就不做更多评价。

最后，感谢掘友的阅读！！！

内容如有不对，也请大家能够指出。