React框架基础

React中文文档：zh-hans.reactjs.org/

React环境初始化

1.脚手架创建项目

$ npx create-react-app my-react-app
// 创建react-ts npx create-react-app my-react-app --template typescript
$ cd my-react-app
$ yarn start / npm start

2.src目录去除无用文件保留 根组件app.ts 入口文件index.ts 全局样式文件index.css

import React from 'react'; // 框架核心包
import ReactDOM from 'react-dom/client'; // 专门做渲染相关的包
import './index.css'; // 全局样式文件
import App from './App'; // 引入根组件

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
// 渲染根组件APP
root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
);

JSX基础

1. js表达式 `<h1>Hello word!{参数名、fn()、xxx.join('-')等}</h1> `
2. jsx列表渲染 `<ul>{list.map(item => <li>{item.name}</li>)}</ul>`
3. jsx条件编译 `{status ? <span>标签</span> : null}`
4. jsx行内样式 `<div style={{ color: 'red' }}></div>`
注意：1.  JSX必须有一个根节点，根节点可以使用`<></>`（幽灵节点）
     3.  JSX中class为驼峰形式className
     4.  JSX支持多行，如果需要换行，需使用`()` 包裹，防止bug出现

React组件通信

React生命周期：projects.wojtekmaj.pl/react-lifec…

// 这是子组件
const Son = (props) => {
    // props就是父组件传过来的值
    console.log(props.name)
    const editData = () => {
        props.nameChange('这里放需要传给父组件的值')
    }
    return (
        <div>
            <span>这是子组件</span>
            <button onClick={editData}>修改父组件值</button>
        </div>
    )
}
// 这是父组件
const nameChange = (data) => {
     // data就是子组件传回来的值
     console.log(data)
}
<Son name="这是一个名字" nameChange={nameChange} />
// 兄弟组件传值主要就是有一个共同的父组件，然后修改调用父组件的值/方法

Hooks基础

useState：为函数组件提供状态（state）

  import { useState } from 'react' // 导入 `useState` 函数
  function App() {
      // 调用 `useState` 函数，并传入状态的初始值
      // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
      // 返回值：数组里面包含两个值：num表示状态值 setNum表示修改该状态的函数
      const [num, setNum] = useState(0)
      return (
        <button onClick={() => { setNum(num + 1) }}>{num}</button>
      )
  }
  export default App

useEffect：为react函数组件提供副作用处理的

import { useEffect, useState } from 'react' // 导入 `useEffect` 函数
function App() {
  const [num, setNum] = useState(0)
  // dom渲染完成之后会执行一次useEffect里面的方法
  useEffect(()=>{
    // dom操作
    document.title = `当前已点击了${num}次`
  })
  // useEffect(()=>{},[参数])这里的第二个参数为数组，空数组或者无第二个参数的时候只执行一次
  // 如果数组里面有值的话，那么这里的值改变一次这个useEffect函数就会执行一次(这个数组里可监听多个参数)
  return (
    <button onClick={() => { setNum(num + 1) }}>{num}</button>
  )
}
export default App

useRef：获取真实的dom元素对象

import { useEffect, useRef } from 'react' // 导入 `useRef` 函数
function App() {  
    const spanRef = useRef(null)  
    useEffect(() => {    
        console.log('这个是dom元素span'spanRef)  
    },[])  
    return (    
        <div>      
            <span ref={ spanRef }>获取dom元素span</span> 
        </div>  
    )
}
export default App

useContext：跨组件通信

import { createContext, useContext } from 'react' // 导入 `useContext` 函数
// 创建Context对象
const Context = createContext()
function Son() {  //子组件
    return <div>这是子组件<Bar/></div>
}
function Bar() {  // 子组件的子组件
    // 底层组件通过useContext函数获取数据  
    const name = useContext(Context)  
    return <div>这是子组件的子组件{name}</div>
}
function App() { // 顶层组件
    return (    
        // 顶层组件通过Provider 提供数据    
        <Context.Provider value={'这是公用的值'}>   
            <div><Son/></div>    
        </Context.Provider>  
    )
}
export default App

React-router

React-router中文文档：react-router.docschina.org/web/api/Rou…

安装react-router包yarn add react-router-dom

核心内置组件

1.BrowserRouter/HashRouter // 包裹整个应用，一个React应用只需要使用一次
  BrowserRouter: h5的 history.pushState
  HashRouter: 监听url hash值实现 链接会多一个# 如：`http://localhost:3000/#/`
2.link // 跳转页面
  <link to="/user">个人中心</link> `to的值为跳转路径`
3.v6版本为Routes  v5版本为Switch
  提供一个路由出口，组件内部会存在多个内置的Route组件，满足条件的路由会被渲染到组件内部
4.Route
  v5版本component/render 被 v6版本element替代
  // v5 
  <Route path=":userId" component={Userfile} />
  <Route path=":userId" render={routeProps => ( <Userfile routeProps={routeProps} animate={true} /> )} /> 
  // v6 
  <Route path=":userId" element={<Userfile />} /> 
  <Route path=":userId" element={<Userfile animate={true} />} />
5.v6版本useNavigate  v5版本useHistory
  跳转页面
  // v5 跳转页面
  history.push('/home'); 
  history.replace('/home'); 
  // v6 跳转页面
  navigate('/home'); 
  navigate('/home', {replace: true});

Mobx

Mobx中文文档：cn.mobx.js.org/

安装Mobx包yarn add mobx mobx-react-lite

// store/home.js
import { makeAutoObservable } from "mobx";
class HomeStore {
    //在Store的constructor内部使用makeAutoObservable(this)将状态变为可观察的
    constructor() {
        makeAutoObservable(this);
    }
}
const home = new HomeStore();
export default home;
// app.js
import home from './store/home'
import { Observer, useLocalObservable } from 'mobx-react-lite'; 
const App = Observer(() => { // Observer用于为组件添加响应式
    const homeStore = useLocalObservable(() => home);
    // useLocalObservable创建⼀个新的可观察对象，并将其保留在组件的整个⽣命周期中
    // 这样就可以使用store中的任何state和Action方法了
})
export default App