react笔记

1. yarn
   yarn 安装环境
   yarn start 启动
   yarn build 构建
   yarn add xxx 安装某插件

   yarn eject 暴露出所有webpack相关的文件（默认是隐藏的）此执行后不可撤销

2. 创建项目并启动
   **create-react-app 是react 提供的用于创建react项目的脚手架库 **
   全局安装： npm install -g create-react-app 或者 npx create-react-app my-app
   切换到想创建项目的目录 create-react-app name
   进入项目文件夹 cd name
   启动项目 npm start

   3. 熟悉项目
      node_modules 依赖存放位置

      public存储静态资源文件（页面 图片 样式）
      网站图标文件要用.ico文件
      index.html 主页面 用户承装组件的主页面 页面永远有一个
      SPA应用 sing page application 单页面应用

   
   %PUBLIC_URL%指的是public这个路径 组件路由时这个优势会体现出来
   

src:
app.js 是创建了个组件叫app
app.css

vscode可以去下载 jsx 插件，然后创建的文件以 jsx 后缀，在里面写 react 语法会有提示

css模块化

初始代码片段 安装插件 搜索react查ES7 React/Redux*******
class输入rcc
函数输入rfc

useEffect 监听dom 执行 DOM 更新之后调用它

useEffect 副作用，与函数业务主逻辑关系不大

componentDidMount() 第一次组件已经被渲染后

componentDidUpdate 每次组件更新的时候

组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法

Hooks 16.8以上版本

路由：
安装路由yarn add react-router-dom或者 npm install --save react-router-dom
组件中引入路由

// 引入路由
import { BrowserRouter as Router,Route,Link } from 'react-router-dom';

useContext 解决父子组件传参 变量共享
useReducer 状态共享相当于redux

// 父子组件传参  createContext  创建上下文  useContext 接收上下文
import React,{ useState ,createContext , useContext} from 'react';

// 组件
function Index(){
    let countA = useContext(CountContent)
    
    return <h2>子组件接收到了来自父组件的 {countA}</h2>
} 

// 创建了一个共享的组件
const CountContent = createContext();

// 父组件
 function Exm02() {
    let [ count , setCount ] = useState(0)
    return (
        <div>
            <p>{count}</p>
            <button onClick={()=>{setCount(++count )}}>戳我</button>
            <CountContent.Provider value={count}>
                <Index/>
            </CountContent.Provider>
        </div>
    )
}

export default  Exm02;

useReducer
Reducer 起源于Redux ，但是与Redux没什么关系

useReducer 和useContext 结合实现 Redux 效果 ，可以代替比较复杂的Redux

useContext 设置访问全局状态 符合了Redux 规则：状态全局化并能统一管理
useReducer 传递参数，更新复杂逻辑状态 实现Redux 中的Reducer 这个部分，控制业务逻辑

useMemo 解决子组件重复执行的问题 类似于监听

// name发生状态变化时发生
const actionXiaof = useMemo(()=>changeXiaoF(name),[name]) 

useMemo是同步的，useEffect是异步的

自定义hooks函数