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 'react'

function Child(props){
    console.log(props);    
    return <div>
        <h1>{props.info.name}</h1>
        <h1>{props.info.sex}</h1>
        <h1>{props.info.age}</h1>
    </div>

}
export default Child

useEffect

useEffect可以使得你在函数组件中执行一些带有副作用的方法。数据获取，设置订阅以及手动更改React组件中的DOM都是副作用的示例。
useEffect代替原来的生命周期
可以视为React生命周期方法中的componentDidMount，componentDidUpdate和componentWillUnmount的组合。

import React,{useState, useEffect} from 'react'

function Child(props){
    console.log(props);
    useEffect(()=>{
        console.log('触发了useEffect');
        return ()=>{
            console.log('return');
        }
    },[props.info.age])
    
    return <div>
        <h1>{props.info.name}</h1>
        <h1>{props.info.sex}</h1>
        <h1>{props.info.age}</h1>
        
    </div>

}
export default Child

useRef

ref跟之前差不多

import React, {useState, useRef, createRef, useEffect } from 'react';

const Test = ()=>{
  const [ index, setIndex ] = useState(1);
  const createRefDiv = createRef();
  const useRefDiv = useRef();

  if(!createRefDiv.current){
    createRefDiv.current = index;
  }

  if(!useRefDiv.current){
    useRefDiv.current = index;
  }

  return(
  <div>
      <p>{createRefDiv.current}</p>
      <p>useRefDiv.current: {useRefDiv.current}</p>
      <div>
        <button onClick={()=>setIndex(index+1)}>改变Index</button>
      </div>
      </div>
  )

}
 
export default Test;

自定义hook

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook，自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性
与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 的规则。

1. 创建自定义hook

我们先创建一个名为的自定义hook

import React,{useState} from 'react'
function useSize(){
    let [data,setData]=useState('哈')
    return [
        data,
        (da)=>{
            console.log(da);
            setData(da)
        }   
    ]
}
export {useSize}

2.使用自定义hook

import React, { useState } from 'react'
//引入你自定义的Hook文件 userSize是你的自定义Hook的函数名字
import {useSize} from './hook'
function Parent() {
    let [mz,setData]=useSize()
    return <div>
    //显示数据
        {mz}
        //修改自定义Hook的值
        <button onClick={
            ()=>{
                setData('hei1')
            }
        }>
            自定义hook
        </button>
    </div>
}
export default Parent

react-router

基本使用

1.安装

npm i react-router-dom

2.导入

import { BroswerRouter as Router, Route, Link, NavLink } from 'react-router-dom'

3.使用

import React, { Component } from 'react';

import { BrowserRouter, Route, Link } from 'react-router-dom';

import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';

export default class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/profile">我的</Link>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/profile" component={Profile} />
      </BrowserRouter>
    )
  }
}