react基础知识

1.路由懒加载

首先需要下载react-router-dom

//1.通过React的lazy函数配合import（）函数动态加载路由组件====>路由组件代码会被分开打包

const Home = lazy(() =>import ('@/pages/Home'))

//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面

<Suspense fallback={<h1>loading....</h1>}>

<Switch>

      <Route path="/xxx" component={xxx}/>

</Switch>

</Suspense>

2.React.useState()

1. State Hook让函数组件也可以有state状态，并进行状态数据的读写操作
2. 语法：const [xxx,setXxx] = React.useState(initValue)
3. useState()说明：参数：第一次初始化指定的值在内部做缓存；返回值：包含2个元素的数组，第一个为内部的当前值，第二个为更新状态值的函数
4. setXxx()两种写法：（1）setXxx(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值（2）setXxx(value =>newValue):参数为函数，接收原本的状态值返回新的状态值，内部用其覆盖原来的状态值
5. useState Hook 中返回的 setState 并不会帮我们自动合并对象状态的属性
6.  setState 中接收的对象参数如果地址没变的话会被 React 认为没有改变，因此不会引起视图的更新

function Demo() {
const [count,setCount] = React.useState(0)
function add(){
setCount(count+1) //第一种写法
setCount(count =>count+1)  //第二种写法
}

return(
<div>
    <h2>当前数字为:{count}</h2>
    <button onClick={add}>数字加一</button>
</div>
)
}
export default Demo

3.React.useEffect()

(1)Effect Hook 何以在函数组件中执行副作用操作（用于模拟生命周期）

(2)React中的副作用操作：发Ajax请求；设置订阅；启动定时器；手动更改真实DOM

(3)语法和说明

useEffect(() =>{
//在此可以执行任何副作用操作
return () =>{  //组件卸载前执行
//在此做一些收尾工作，比如清除定时器、取消订阅
}
},[stateValue]) //如果指定的是[]，就会对所有属性进行监控

(4)可以把useEffect Hook 看作如下三个函数的组合componentDidMount()|componentDidUpdate()|componentWillUnmount()

(5)如果同时出现多个 useEffect ，会按出现顺序依次执行

4.React.useRef() 

1. Ref Hook可以在函数组件中存储/查找组件内的标签或任意其他数据
2. 语法：const refContainer = useRef()
3. 作用：保存标签对象，功能与React.createRef()一样