由Vue转React的自学文档

react学习文档

由vue3转学react，之前从未接触过react，自学了一遍感觉还好，容易上手。
期间的一些笔记，后续有更深的见解持续更新。

组件（类组件，函数组件）

• 组件名称首字母要大写，必须有返回值，没有写null
• 设置默认值：function 组件名（｛默认值：1｝）/ 类组件：static defaultProps ={ 默认值：1 }
• 实例化：类组件有实例化，函数组件没有

组件通信

父传子

1. 父组件通过state传递值。state里设置要传递的值
2. 给子组件标签添加属性，msg={this.state.msg1}
3. 子组件通过props接受父组件传来的数据(类组件用this.props /函数组件通过参数)获取 ->props对象

子传父

​ 子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数实参传入即可

兄弟组件通信

​ 利用共同的父组件，实现子传父，父在传子的兄弟通信

跨组件（祖孙）通信Context

​ 在嵌套组件树里，采用Context不需要通过层层props传递，就能进行数据传递。

1. 创建Context对象，导出Provider和Consumer对象
2. 使用Provider包含根组件提供数据
3. 将需要用到组件，使用Consumer包裹，然后 value => 获取

//祖组件
const { Provider，Consumer } = createContext()
<Provider value={this.state.nextMsg}>
  <Brother/>
</Provider>

//孙组件
 <Consumer>
  {value => <span>{value}</span>}
</Consumer>

child属性：在组件内部使用都会自带这一属性，可以是文本，标签元素，函数，jsx

//例如父组件
<NextFather>
    <div>
 	   <p>标签</p>
	   {()=>{this.fun(id)}}
    </div>
</NextFather>

//NextFather子组件
function NextFather({children}){
    return(
       <div>
        {children}
       </div>
    )
}

生命周期

挂载阶段：

1. constructor(初始化state，创建Ref，使用bind解决this问题) ，初始化最先执行，只执行一次。

2. render (渲染UI)，每次组件渲染的时候都会触发。

3. componentDidMount(发送网络请求，Dom操作)，完成渲染后执行，初始化的时候执行一次。

更新阶段：

1. render(与挂载相同，是同一个render)，每次组件都会触发
2. componentDidUpdate（Dom操作，可以获取到更新后的Dom，不要直接调用setState），更新后渲染

卸载阶段

1. componentWillUnmount（执行清理工作，比如清理定时器），组件卸载

hooks的一些API：

本质：让函数组件更强大更灵活的钩子，只能在函数组件（有状态）中使用。

作用：组件状态复用，class组件自身问题

注意：只能写在函数组件最外层，不能写在if，for循环判断里面（官文文档解释为react的运行机制要保持这些hooks的顺序的唯一性），可以将回调函数作为参数传递

useState

const [count, setCount] = useState(initCount);

useState传入的是当前count初始值也就是initCount（可以是初始值也可以是函数），然后返回的是最新的count，和一个修改count的方法（可以普通调用和函数调用,数据是对象类型的话，一般要结合拓展运算符复制一份）。

//三种情况
setCount(count + 1)
setCount(() => count + 1)
setCount(() => {
    return{
        ...count,
        //再对象赋值
    }
})

初始值initCount只有在首次渲染生效，后续更新会被忽略，直接调用setCount

一句话：在同步里，异步更新状态和dom，在异步里，同步更新状态和dom。

useEffect：为更好处理副作用（除了更新UI外的作用，如ajax，本地存储）

感觉像vue的nextTick。

React会在每次渲染完后调用useEffect，包括第一次加载渲染DOM。

useEffect 设计初衷是用来取代 componentDidMount 和 componentDidUpdate，它接收两个参数（fun，[]）,一个处理函数，另一个关联的状态或数组，这个变了就重新执行。

加 [ ] 为行业只执行义一次的默认写法，一般用于发送请求：

useEffect(() => {
  	async function sendData() {
  		const res = await fetch('http://www.baidu.com')
        .then(response => response.json())
        .then(data => console.log(data))
  	}
    sendData()
},[])

而 useLayoutEffect 的作用和 useEffect 几乎差不多，几乎看不到任何差别，但它们的渲染底层逻辑就稍微不同。

具体可见这篇文章，用一个例子很清楚讲明，在性能优化上尽量选用useEffect，在解决页面渲染更新会闪烁可以用useLayoutEffect。

useRef:获取实例dom或组件方法,必须是类组件

步骤：导入useRef函数，通过ref绑定要获取的元素，执行useRef并传入null，这将会返回一个含有current属性的对象。

import React, { useRef, useEffect } from 'react'
//app组件里绑定
<UseRef1 ref={hook} />
<p ref={pRef}>useRef学习，标签实例</p>

//获取
 const pRef = useRef(null)
 const hook = useRef(null)
  useEffect(() => {
    console.log(pRef.current)
    console.log(hook.current.state.name)
  }, [])

useContext：祖孙组件响应式更新

算是对 Provider 和 Consumer 写法的一种优化吧，不同的是 useContext 可以将传递的数据嵌套的更深，孙组件都能拿到父组件的值，什么意思呢？

大致就是Provider 只能给 Consumer 共享数据， Consumer 下的孙组件却不行！但 useContext 却可以！

function App(){
  //父最组件用Provider为所有子孙提供value值
  return (
    <numberContext.Provider value={12}>
        <div>
        	<Son/>
        </div>
    </numberContext.Provider>
  )

function Son(){
  //子组件使用Consumer从父组件那上下文获取value
  return(
    <numberContext.Consumer>
      {value=><div>the answer is {value}</div>}
    </numberContext.Consumer>
  )
}

Provider 和 Consumer 在标准模式下相当于消息的发布订阅模式了，这很好理解。 useContext 则可以理解为小型的 redux 。

一个例子直接说明梗概。

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

//1.先创建个上下文对象
const Context = createContext()

//2.在顶层app组件上,使用Providr包裹孙组件，value传值，这都是必要的
// 和之前的 Provider + Consumer 没啥区别，
const [count,setCount]=useState(10)
<Context.Provide value={count}>
      <div>
        <Son />
    	<button onClick={()=>{setCount(count+1)}}></button>
      </div>
</Context.Provider>

// 不同的是这Son组件下包含Shun组件  -> 
//3.在Shun组件里调用useContext方法，参数用父组件createContext创建出来的对象
//Context和createContext保存的变量一致
const count = useContext(Context)

function Shun(){
  //子组件使用Consumer从父组件那上下文获取value
  return(
    <numberContext.Consumer>
      the answer is {value}
    </numberContext.Consumer>
  )
}
//这样孙组件就可以显示或同步app组件的值

总结：就是父组件多了用 createContext 创建 context 对象的步骤，要用到的组件少了 Consumer 的引用，多了个 useContext 的调用，没了，就这么简单。

useReducer

const [ state,dispatch ] = useReducer(reducer, initState, init)

接收三个参数，分别为：处理状态更新的reducer，状态初始值，状态初始化函数。

有两种传递方式：不传第三个参数，如1；state数据比较复杂，可以将第二个参数作为第三个参数传入，如2。

最后，useReducer将返回两个东西，一个当前最新的状态state，一个是更新状态的dispatch。

//1.将状态初始值作为第二个参数传入
const [state, dispatch] = useReducer(
    reducer,
    {count: initState}
)
//2.惰性初始化，将第二个参数作为第三个函数传入
function init(initState){
    return {count: initState}
}

function renducer(state,action){
    switch{
        case "change":
            return {count: state.count - 1}
        case "reset":
            return init(ac)    
        //...
    }
}

function Counter({initState}){
    const [ state,dispatch ] = useReducer(reducer, initState, init)
    return(
    <>
    	<button onClick={() => dispath({type: 'change',count: initState})}></button>    
    </>
    )
}

useCallback

入参和useEffect，接收两个参数（fun，[]）,一个处理函数，另一个关联的状态或数组，这个变了就重新执行。

那为啥要用useCallback：那是因为在函数组件里的函数，会随着状态值的更新而重新渲染，函数也会频繁被定义且组件通信很耗性能。使用useCallback+memo可以解决上述问题

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

useMemo（相当于vue的computed）

入参和useEffect，接收两个参数（fun，[]）,一个处理函数，另一个关联的状态或数组，这个变了就重新执行。如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

官方建议：不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

useCallback + useMemo

痛点见上述

//使用Memo后确实不会影响了，但父组件传值过来呢
const Son = React.memo(function Son(){
    ...
})

//父组件:这样就不会
const childClick = useCallback(() => {}.[])
<Son click={childClick} />

路由：react-router-dom

先下载react-router-dom@6依赖，在导入import { BrowserRouter, Routes, Route, Link } from 'react-router-dom' , 基本使用如下。BrowserRouter:包裹整个路由，一个react应用只需使用一次，还有个路由模式：hashRouter

<BrowserRouter>
  <Link to="/">index</Link>
  <p></p>
  <Link to="about">about</Link>
  <Routes>
    <Route path="/" element={<Index />}></Route>
    <Route path="about" element={<About />}></Route>
  </Routes>
</BrowserRouter>

编程式导航：replace设置为true表示不保留历史记录

import { useNavigate } from 'react-router' 
const navigage = useNavigate()
  const goAbout = () => {
    navigage('/about', { replace: true })
  }

<button onClick={goAbout}>跳转到关于我</button>

编程式导航传参方式：searchParams / params

//searchParams 传参：和取参
navigage('/about?id=0001', { replace: true })
let params = useSearchParams()
let id = params.get('id')

// params 传参：和取参
navigage('/about/id/0001', { replace: true })
let params = useParams()
let id = params.id

二级路由：如果要设置一级路由默认渲染的二级路由，可如下例所示

//给URL地址about后面添加nextRouter二级路由
//在About组件内引入Outlet，再设置出口即可
<Route path="about" element={<About />}>
  {/* 二级路由 */}
  <Route path="nextRouter" element={<NextRouter />}></Route>
  {/* 默认二级路由 */}
  <Route index element={<Board />}></Route>
  {/* 404页面 */}
  <Route path="*" element={<NotFound />}></Route>
</Route>

mobx

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5lep4BGR-1658071112905)(C:\Users\只属于她\AppData\Roaming\Typora\typora-user-images\image-20220627223718081.png)]

校验规则第三方插件: prop-type

标签传递 Boolean值需要按对象形式传递，如 isTrue= {false},而非isTrue= “false”

可以传递任何数据，包括函数，jsx

给组件添加内置属性或方法

//添加属性验证
Module.protoTypes={
	title:Name.string
    isTrue:flag.bool
}

添加校验规则：需要另外安装第三方插件npm install prop-type ,导入prop-types包，在组件名.propTypes={} 添加校验规则。

可检验的规则有：

• 常见类型array、bool、fun、number、obj、string
• 基本类型：element
• 必填项：isRequired
• 特定结构对象：shape({})

import Proptypes from 'prop-types'
//父组件调用
<Son list={9}>
//子组件
Son.propTypes={
   list:PropTypes.arr
}

其他

####　获取输入框value值的几种方法

1. 通过在state 中定义变量，在输入框绑定value={this.state.component} ，和 onChange={this.changeInputValue} 事件,通过事件修改state的中变量。

  changeInputValue = (e) => {
    this.setState({
      component: e.target.value,
    })
  }

2. 通过ref拿到。先声明myRef = React.createRef()，在input标签内绑定ref={this.myRef}，最后通过this.myRef.current.value 拿到value值。

修改数组的某项状态

删除：直接filter过滤传过来的值不等于数组的值就好，或者根据索引 splice(index, 1)item项

this.setState({ list: this.state.list.filter((item) => item.id !== id) })  

修改：一般对整个数组map遍历到需要修改的项

list: this.state.list.map((item) => {
	if (item.id === id) {
		return {
			attitude: attitude === 1 ? 0 : 1,
		}
	} else {
		return item
	}
}),