React Hook和React-router的基本使用

Hook

Hook 是 React 16.8 的新增特性,React 里面的 Hook 是一个函数.

好处:

它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook可以解决的问题:

• 避免地狱式嵌套，可读性提高。
• 函数式组件，比class更容易理解。
• class组件生命周期太多太复杂，使函数组件存在状态。
• 解决HOC和Render Props的缺点。
• UI 和 逻辑更容易分离。

目前官网提供的Hook API

基础Hook

Hook	作用
useState	设置state，以及更新state的函数
useEffect	代替原来的生命周期
useContext	如果需要在组件之间共享状态，可以使用useContext()。

额外的Hook

Hook	作用
useReducer	代替原来redux里的reducer,配合useContext一起使用
useCallback	返回一个memoized回调函数，该回调函数仅在某给依赖项改变时才会更新。
useMemo	控制组件更新条件，可根据状态变化控制方法执行,优化传值
useRef	跟以前的ref一样
useImperativeHandle	可以在使用ref时自定义暴露给赋组件的实例值
useLayoutEffect	与useEffect相同，会在所有的DOM变更之后同步调用effect
useDebugValue	在 React 开发者工具中显示自定义 hook 的标签，调试使用。

我只写几个Hook,不全写

useState

设置state，以及更新state的函数
返回:

• 当前的 state 值
• 一个允许更新 state 值的 function
  父组件

import React, {
    useState } from 'react'
import Child from './child'
function Parent() {
   
    // 声明一个新的叫做 name 的 state 变量
    // let [状态的值,修改状态的方法]=userState(状态的初始值)
    // 字符串格式的写法
    // let [name,setName] = useState("我是parent")
    // 对象格式的写法
    let [data, setName] = useState({
   
        name: '哈哈',
        sex: 'nan',
        age:10
    })
    return <div>
        <Child info={
   data} />
        //点击修改
        <button onClick={
   
            () => {
   
                setName({
   
                    name: '嘿嘿',
                    sex: 'nv',
                    age:10
                })
            }
        }>点一点</button>
    </div>
}
export default Parent

子组件

import React,{
   useState} from '