关于react.js:react进阶用法完全指南

React调用回调函数，正确设置this指向的三种办法

通过bind

this.increment = this.increment.bind(this);

通过箭头函数

<button onClick={this.multi}>点我*10</button> 

multi = () => {
    this.setState({
        count: this.state.count * 10
    })
}

箭头函数包裹

<button onClick={() => {this.muti2()}}>点我*10</button>

绑定事件传递参数

通过箭头函数传递事件参数。

<li onClick={(e) => {this.movie(item,index,e)}}>{item}</li>

React实战视频解说：进入学习

条件渲染

通过if进行条件判断

const {isLogin} = this.state;
let welcome = null;
if (isLogin) {
    welcome = <h2>欢送回来</h2>
} else {
    welcome = <h2>请先登录！</h2>
}

应用三目运算符

{isLogin ? <h2>欢送回来</h2> : <h2>请先登录！</h2> }

应用逻辑与

上面这种写法能够省略null。

{isLogin && <h2>你哈欧亚</h2> }

列表渲染

应用map高阶函数

{
    this.state.movies.map((item,index) => {
        return (
            <li onClick={(e) => {this.movie(item,index,e)}}>                {item}            </li>
        )
    })
}

应用filter进行过滤

<ul>
    {
        this.state.scores.filter(item => {
            return item >= 60
        })
    }
</ul>

应用slice进行截取

区间是左闭右开。

{
    this.state.scores.slice(0,3).map(item => {
        return <li>{item}</li>
    })
}

脚手架的根本应用

应用脚手架创立我的项目

项目名称不能蕴含大写字母。

create-react-app demo

组件通信

1. 父组件向子组件传递数据通过props

父组件

export default class App extends Component {
  render() {
    return (
      <div>
          <Child  name ='张三' age="18" />
      </div>
    )
  }
}

子组件

class Child extends Component {
    constructor(props) {
        super()
        this.props = props;
    }
    render() {
        const {name,age} = this.props;
        return (
            <div>子组件获取到的name是：{name},age是：{age}</div>
        )
    }
}

2. 子组件向父组件传递数据通过回调函数

import React, { Component } from 'react';

class Btn extends Component {
    render() {
        const {increment} = this.props;
        return (
            <button onClick={increment}>+1</button>
        )
    }
}


class App extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
        }
    }
    render() {
        const {count} = this.state;
        return (
            <div>
                <h1>以后求和为：{count}</h1>
                <Btn increment = {e => this.increment()} />            </div>
        );
    }
    increment() {
        console.log(666);
        this.setState({
            count: this.state.count + 1
        })
    }
}

export default App;

3. 跨组件层级通信（Context）(类组件)

import React, { Component } from 'react'

const UserContext = React.createContext({
    name: '张三',
    age: 20
})

class Sub extends Component {
    render() {
        return (
            <div>
                <h1>name是：{this.context.name }</h1>
                <h1>age是：{this.context.age}</h1>
            </div>
        )
    }
}

Sub.contextType = UserContext
function Profile() {
    return (
        <div>
            <Sub />
            <ul>
                <li>设置1</li>
                <li>设置2</li>
                <li>设置3</li>
                <li>设置4</li>
            </ul>
        </div>
    )
}

export default class App extends Component {
    constructor(){
        super();
        this.state = {
            name: '李四',
            age: 18
        }
    }
    render() {
        return (
            <div>
                <UserContext.Provider value = {this.state}>
                    <Profile />
                </UserContext.Provider>
            </div>
        )
    }
}

上面是函数式组件的写法

function Sub(props) {
    return (
        <UserContext.Consumer>
            {                value => {                    return (                        <div>
                            <h1>name是: {value.name}</h1>
                            <h1>age是: {value.age}</h1>
                        </div>
                    )                }            }        </UserContext.Consumer>
    )
}

4. 任意组件通信（事件总线event bus）

装置events库

npm install events

创立eventBus对象

const eventBus = new EventEmitter()

通过emit发送音讯

<button onClick={e => eventBus.emit('sayHello','Hello Home')}>点击向Home组件发送音讯</button>

通过addListener来监听音讯

eventBus.addListener('sayHello',(args) => {
    this.setState({
        message: args
    })
})

在线CodeSandBox

参数验证

应用PropTypes进行参数验证。

import React from 'react'
import PropTypes from 'prop-types'
export default function App() {
    const names = [1,2,3]
    return (
        <div>
            <Cpn name="张三" age={20} names={names} />
        </div>
    )
}

function Cpn(props) {
    const { name, age,names } = props;
    return (
        <div>
            <h1>{name} + {age} + </h1>
            {                names.map(item => item)            }        </div>
    )
}

Cpn.propTypes = {
    names: PropTypes.array,
    age: PropTypes.number.isRequired
}

React实现slot

通过props进行传递jsx。

父组件

export default class App extends Component {
  render() {
    return (
      <div>
          <NavBar               leftSlot={<button>111</button>}              centerSlot={<a href="/#">222</a>}              rightSlot={<span>666</span>}          />         </div>
    )
  }
}

子组件

export default class NavBar extends Component {
    render() {
        const {leftSlot,centerSlot,rightSlot} = this.props;
        return (
            <div className='nav-bar'>
                <div className="left">
                    {leftSlot}                </div>
                <div className="center">
                    {centerSlot}                </div>
                <div className="right">
                    {rightSlot}                </div>
            </div>
        )
    }
}

性能优化

函数组件：应用memo
类组件：应用pureComponent

应用ref操作DOM

在React的开发模式中，通常状况下不须要间接操作DOM，然而某些非凡状况，的确须要间接对DOM进行操作，此时就须要用到Ref。

留神：上面的几种办法都是在类组件中的

字符串模式的ref

  <div>
    <div ref='titleRef'>Hello,React</div>
    <button onClick={e => console.log(this.refs.titleRef.innerHTML = 'Hello Ref')}>点击获取题目的DOM元素</button>
  </div>

通过createRef

class App extends Component {
  constructor(props) {
    super(props);
    this.titleRef = createRef();
  }
  render() {
    return (
      <div>
        <div ref={this.titleRef}>Hello,React</div>
        <button onClick={e => console.log(this.titleRef.current.innerHTML = '张三')}>点击获取题目的DOM元素</button>
      </div>
    );
  }
}

回调函数模式的Ref

class App extends Component {
  constructor(props) {
    super(props);
    this.titleRef = null;
  }
  render() {
    return (
      <div>
        <div ref={arg => this.titleRef = arg}>Hello,React</div>
        <button onClick={e => console.log(this.titleRef.innerHTML = '张三')}>点击获取题目的DOM元素</button>
      </div>
    );
  }
}

在函数组件中应用ref，能够通过useRef钩子函数

function App() {
  const titleRef = useRef();
  return (
    <div>
      <div ref={titleRef}>Hello,React</div>
      <button onClick={e => titleRef.current.innerHTML = '张三'}>点击获取题目的DOM元素</button>
    </div>
  );
}

受控组件和非受控组件

受控组件

将可变状态保留在组件的state属性中，并且只能通过应用setState来更新，这种组件叫做受控组件。

上面是一个受控组件的例子：

function App() {
  const [msg,setMsg] = useState('');
  useEffect(() => {
   console.log(msg); 
  })
  return (
    <div>
      <form onSubmit={e => handleSubmit(e)}>        <label htmlFor="username">
          用户：<input                   type="text"                   id="username"                   onChange={e => setMsg(e.target.value)}                   value={msg}                />        </label>
        <input type="submit" value="提交" />
      </form>
    </div>
  );
}

非受控组件

如果要应用非受控组件中的数据，须要应用ref来从DOM节点中获取表单数据。

高阶组件

高阶组件是一个接管参数为组件，返回值为新组件的函数。留神：高阶组件是一个函数。

上面是一个高阶组件的实例：

class App extends PureComponent {
  render() {
    return (
      <div>
        App        {this.props.name}      </div>
    )
  }
}

function enhanceComponent(WrappedComponent) {
  return class newComponent extends PureComponent {
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}

const EnhanceComponent = enhanceComponent(App)

export default EnhanceComponent

高阶组件的利用一：加强props

function Home(props) {
  return (
    <h1>昵称：{props.nickname}  等级: {props.level} 区域：{props.region}</h1>
  )
}

function enhanceProps(Cpn) {
  return props => {
    return <Cpn {...props} region="中国" />
  }
}

const EnhanceHome = enhanceProps(Home)

class App extends PureComponent {
  render() {
    return (
      <div>
        <EnhanceHome nickname="张三" level="99" />
      </div>
    )
  }
}
export default App

高阶组件的其余利用

高阶组件还能够用于登录鉴权、生命周期劫持（这里的生命周期劫持，咱们能够了解为计算某个组件的渲染工夫）、通过forwardRef高阶函数给函数式组件传递Ref，具体不再赘述。

portals的应用

portals存在的意义在于，有时候咱们想要一个组件独立于父组件进行渲染，例如这样的一个场景：父组件的显示区域比拟小，然而咱们想要一个组件显示在屏幕的两头，此时就能够应用portals。

上面这个例子是将Modal组件渲染到屏幕的两头。

function Modal(props) {
  return (
    ReactDOM.createPortal(props.children,document.querySelector('#modal'))
  )
}

function Home(props) {
  return (
    <div>
      <h1>Home</h1>
      <Modal>
        <h2>Title</h2>
      </Modal>
    </div>
  )
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Home />
      </div>
    )
  }
}

fragment

所谓的fragment就是应用空标签来代替div标签，防止出现不必要的标签。

<>
  <h1>以后求和为：{count}</h1>
  <button onClick={e => setCount(count + 1)}>点我+1</button>
</>

上面这种写法，能够增加属性，下面的写法令不行。

<Fragment>
  <h1>以后求和为：{count}</h1>
  <button onClick={e => setCount(count + 1)}>点我+1</button>
</Fragment>

React中的CSS

内联款式

长处：

不会有抵触。
能够动静获取以后state中的动静。

export default function App() {
  const pStyle = {
    color: 'pink'
  }
  return (
    <div>
      <h2 style={{color: 'red'}}>这是题目</h2>
      <p style={pStyle}>这是一段文字</p>
    </div>
  )
}

毛病：

写法上须要应用驼峰标识。
某些款式没有提醒。
大量的款式，代码凌乱。
某些款式无奈编写，例如伪类、伪元素。

组件文件夹下独自引入css

这种形式容易呈现款式笼罩的问题。

CSS modules

CSS modules能够无效的解决款式笼罩的问题。

在组件文件夹下编写CSS文件，留神后缀是.module.css
组件中引入款式

import style from './style.module.css'

通过类名的形式应用css

export default function App() {
  return (
    <div>
      <h1 className={style.title}>这是APP</h1>
    </div>
  )
}

从这种形式咱们能够看出显著要好于独自写CSS。然而这种计划也有其毛病，就是援用的类名中不能蕴含短横线，这样无奈辨认，不不便动静批改某些款式。

CSS IN JS

CSS-in-JS是一种模式，其中CSS由JS生成而不是在内部文件中定义，此性能不是React的一部分，而是由第三方库提供。

目前比拟风行的CSS-in-JS库有：

styled-components(应用最多的)
emotion
glamorous

在应用CSS-in-JS之前，咱们须要把握标签模板字符串的用法，上面是一个经典的例子：

function test(...arg) {
  console.log(arg);  // [['123 is ', ''], '张三']
}

const name = '张三'

test`123 is ${name}`

上面介绍下，如何应用styled-components。

装置

npm install styled-components

引入styled-components

import styled from 'styled-components'

创立带款式的组件(留神：款式没有加引号)

const Wrapper = styled.h1`  color: red;`

应用带款式的组件替换原生组件

<Wrapper>这是APP组件</Wrapper>

styled-components也是反对less等写法的，例如上面的例子：

const Wrapper = styled.div`  color: red;  .banner {    background-color: blue;  }  // 留神：这里也能够应用props的写法来获取动静属性`

给css-in-js传递动静属性。

import React,{useState} from 'react'
import styled from 'styled-components'

const Wrapper = styled.div.attrs({
  bColor: "red"
})`  background-color: lightblue;  border: 2px solid;  border-color: ${props => props.bColor};  color: ${props => props.color};`

export default function App() {
  const [color] = useState('yellow')
  return (
    <div>
      <Wrapper color={color}>
        这是APP组件        <h2 className="banner">这是H2</h2>
      </Wrapper>
    </div>
  )
}

应用classnames库给React动静增加className

装置库

npm install classnames

引入库

import classNames from 'classnames';

以对象的模式动静增加className

function App() {
  const [isActive] = useState(true);
  return (
    <div className="App">
      <h1 className={classNames({"active": isActive})}>这是APP</h1>
    </div>
  );
}

如果想要赋值常量，间接传入一般的字符串即可，以逗号宰割。

Antd的根本应用

脚手架场景下

装置antd

npm install antd

引入antd和对应的css款式

import { Button, Space } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';
import './App.css'

依据官网组件的实例代码进行批改。

通过craco对antd主题进行配置

装置@craco

npm install @craco

自定义主题实际上须要装置上面三个包

"@craco/craco": "^6.4.3",
"babel-plugin-import": "^1.13.5",
"craco-less": "^2.0.0",
"less-loader": "^10.2.0"

craco.config.js

const CracoLessPlugin = require('craco-less');
module.exports = {
  babel: {
      plugins: [
         [
             "import", 
             {
                 "libraryName": "antd",
                 "libraryDirectory": "es",
                  "style": true //设置为true即是less
              }
          ]
      ]
  },
  plugins: [
      {
          plugin: CracoLessPlugin,
          options: {
              lessLoaderOptions: {
                  lessOptions: {
                      modifyVars: { '@primary-color': '#7d2b21' },
                      javascriptEnabled: true,
                  },
              },
          },
      },
  ],
};

强烈建议应用yarn，不要应用antd。

给文件夹门路起别名

首先，之所以要给文件夹起别名，就是因为有时候文件的嵌套层级比拟深，不好找到文件，然而通过给根文件夹起别名则能够很快的找到它们。

在配置文件中进行如下配置：

const path = require('path')
// 将参数的门路和以后的门路进行一个拼接
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
    webpack: {
        alias: {
            "@": resolve("src"),
            "components": resolve("src/components")
      }
    }
};

引入文件门路的时候则能够这样引入：”

import Test from 'components/Test'

评论组件案例

codesandbox在线代码

axios的应用和封装

装置axios

yarn add axios

引入axios

import axios from 'axios'

发送get申请

axios({
  url: "https://httpbin.org/get",
  params: {
    name: '张三',
    age: 20
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

还能够通过上面的形式：

axios.get("https://httpbin.org/get", {
  params: {
    name: '张三',
    age: 20
  }
}
).then(res => console.log(res))

发送post申请

axios({
  url: "https://httpbin.org/post",
  data: {
    name: 'edge',
    age: 0
  },
  method: "post"
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err)
})

也能够通过上面这种形式：

axios.post("https://httpbin.org/post", {
  data: {
    name: 'edge',
    age: 0
  }
}).then(console.log)

axios联合async和await

  useEffect(() => {
    async function fetchData() {
      const result = await axios.post("https://httpbin.org/post", {
        data: {
          name: 'edge',
          age: 0
        }
      })
      console.log('111',result);
    }
    fetchData()
  }, [])

axios.all的应用

const request1 = axios({
  url: "https://httpbin.org/get",
  params: {name: "test",age: 20}
})

const request2 = axios({
  url: "https://httpbin.org/post",
  data: {name: 'kobe',age: 66},
  method: 'post'
})

axios.all([request1,request2]).then(([res1,res2]) => {
  console.log('axios.all：',res1,res2);
}).catch(err => {
  console.log(err);
})

配置多个申请的独特信息

在引入axios的中央进行如下配置：

axios.defaults.baseURL = "https://httpbin.org";
axios.defaults.timeout = 5000;
axios.defaults.headers.common["token"] = "dfasdfkajndsfkjndsf";
axios.defaults.headers.post["Content-type"] = "application/text"

配置后的申请则能够这样写：

const request1 = axios({
  url: "/get",
  params: {name: "test",age: 20}
})

const request2 = axios({
  url: "/post",
  data: {name: 'kobe',age: 66},
  method: 'post'
})

创立axios实例来实现个性化申请不同的服务器

下面咱们提到了创立公共申请的配置信息，然而有时候咱们想要申请的URL可能是不同的地址，此时就须要个性化的配置了。

const instance2 = axios.create({
  baseURL: "http://baidu.xyz",
  timeout: 1000
})
instance2.get('/get',{
  params: {data: "test"}
}).then(res => console.log(res)).catch(err => console.log(err))

axios拦截器

axios.interceptors.request.use(config => {
  // 1. 能够在这个地位设置显示loading组件
  // 2. 给申请增加token
  // 3. 对params进行序列化的操作
  console.log('拦挡胜利');
  config.headers.token = JSON.stringify({ name: 'ty' });
  return config
}, err => {

})

// // 响应拦截器
axios.interceptors.response.use(res => {
  // res.data = 666;
  console.log('响应拦截器拦挡胜利');
  return res
}, err => {

})

axios.get('https://httpbin.org/get', {
  params: { name: 'justin' }
}).then(console.log).catch(console.log)

axios.post('https://httpbin.org/post', {
  data: { name: 'justin6366666666' }
}).then(res => console.log('响应：',res)).catch(console.log)

二次封装axios

之所以要对axios进行二次封装，次要就是一旦申请不能应用了，只须要批改一个文件即可，同时封装能够缩小很多反复代码的编写。

创立一个service文件夹
service文件夹下创立一个request.js
service文件夹下创立一个config.js（用于书写axios的公共配置信息）

config.js中能够写上面的配置信息：

const devBaseURL = "https://httpbin.org";
const proBaseURL = "https://production.org";

export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL : proBaseURL;

export const TIMEOUT = 5000;

request.js中能够写上面的申请办法：

import axios from "axios";

import {BASE_URL,TIMEOUT} from './config'

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: TIMEOUT
})

export default instance

React Hooks

为什么须要Hooks?

Hook是React16.8中新增的个性，它能够让咱们在不编写class的状况下应用state以及其余的React个性。

在Hook呈现之前，函数式组件绝对于class组件有如下劣势：

class组件能够定义本人的状态，函数式组件不能够。
class组件有本人的生命周期，函数式组件则会每次从新渲染都从新发送一次网络申请。
函数式组件在从新渲染时整个函数都会被执行。

class组件存在的问题

随着业务的减少，逻辑的简单，class组件可能会变得越来越简单，比方componetDidMount中可能蕴含大量的逻辑代码，这样的class实际上难以拆分，逻辑混在一起，代码的复杂度比拟高。
class组件中的this指向比较复杂，难以了解。
组件复用状态难。例如咱们应用Provider、Consumer来共享状态，然而屡次应用Consumer时，咱们的代码就会存在很多嵌套。

为什么叫做Hook?

Hook间接翻译可能是钩子的意思，意味着这类函数能够帮忙咱们钩入React的state以及生命周期等个性。

应用Hooks的两个规定

只能在函数最外层调用Hook，不要在循环、条件判断、或者子函数中调用。
只能在React的函数式组件中调用Hook，不能在JS函数中调用。

useState的外围用法

useState能够接管一个函数，也能够接管一个值，如果是函数，其能够拿到前一个状态，然而返回的要是最新的状态，如果是值的话，就应该是返回的最新状态。

<button onClick={e => setCount(precount => precount + 1)}>点击+1</button>
<button onClick={e => setFriends([...friends,'匿名'])}>点击增加敌人</button>

useEffect的外围用法

useEffect次要是用来模仿生命周期。

useEffect在一个函数组件中能够定义多个，并依照程序执行。

  useEffect(() => {
    console.log('批改DOM');
  })

  useEffect(() => {
    console.log('订阅事件');
  },[])

检测某个状态发生变化的时候才执行回调函数。

  useEffect(() => {
    console.log('订阅事件');
  },[count])

useContext的外围用法

// 1. 创立一个xxxContext
const countContext = createContext();

// 2. 通过xxxContext.Provider 包裹传递value给指标组件
function App() {
    return (
        <countContext.Provider value={666}>
            <Foo />
        </countContext.Provider>
    )
}
// 3. 指标组件通过useContext(xxxContext)获取value传递的值
function Foo() {
    const count = useContext(countContext)
    return (
        <div>
            {count}        </div>
    )
}

useReducer的外围用法

useReducer是useState的一种代替计划。

const reducer = (state,action) => {
  switch (action.type) {
    case "increment":
      return {...state,count: state.count + 1}
    default:
      return state;
  }
}

export default function Home() {
  const [count,dispatch] = useReducer(reducer,{count: 0});
  return (
    <div>
        <h1>以后求和为：{count.count}</h1>
        <button onClick={e => dispatch({type: 'increment'})}>点我+1</button>
    </div>
  )
}

useCallback的外围用法

useCallback会返回一个函数的memorized值，在依赖不变的状况下，屡次定义的时候，返回的值是雷同的。

useCallback想要解决的问题是这样的，如果一个函数组件中有一个函数，只有状态产生扭转，这个函数都会被从新定义，非常节约性能，并且可能带来不好的影响。

useCallback联合memo能够进行性能优化，确保传入的是雷同的函数实例。useCallback如果依赖项是一个空数组，则只会执行一次，返回的都是雷同的函数实例，如果有依赖项的话，则是依赖项发生变化才返回新的实例。

常见的应用场景是：将一个函数传递给组件进行回调时，能够进行性能优化。

export default function CallbackDemo() {
  console.log('CallbackDemo被从新渲染');
  const [count, setCount] = useState(0);
  const [show,setShow] = useState(true);
  const increment1 = useCallback(() => {
    console.log('increment1函数执行了~');
    setCount(count + 1);
  })

  const increment2 = useCallback(() => {
    console.log('increment2函数执行了~');
    setCount(count + 1);
  }, [count])
  return (
    <div>
      <h1>以后求和为：{count}</h1>
      <MyButton title="btn1" increment={increment1} />
      <MyButton title="btn2" increment={increment2} />
      <button onClick={e => setShow(!show)}>点击切换show</button>
    </div>
  )
}

useMemo的外围用法

useMemo的外围也是为了性能优化。

useMemo返回的也是一个缓存的值。
依赖不变的状况下，屡次定义的时候，返回的值是雷同的。

上面的这个例子能够很好的阐明useMemo的外围用法，能够无效的防止calc函数不必要的从新计算。

const calc = (num) => {
  console.log('从新计算');
  let temp = 0;
  for (let i = 1; i <= num; i++) {
    temp += i;
  }
  return temp;
}

export default function MemoHookDemo() {
  const [count, setCount] = useState(10);
  const [show,setShow] = useState(true);
  // 防止calc函数呈现不必要的从新计算
  const total = useMemo(() => {
    return calc(count);
  },[count])
  return (
    <div>
      <h1>以后求和为：{total}</h1>
      <button onClick={e => setCount(count + 1)}>点击+1</button>
      <button onClick={e => setShow(!show)}>点击切换</button>
    </div>
  )
}

useMemo还能够防止子组件不必要的从新渲染。(联合了memo)

const MyButton = memo(props => {
  console.log('子组件从新渲染');
  return (
    <h2>子组件收到的props:{props.info.name}</h2>
  )
})

export default function MemoHookDemo02() {
  console.log('父组件从新渲染');
  const [show,setShow] = useState(false);
  const info = useMemo(() => {
    return {name: "漫威"}
  },[])
  return (
    <div>
      <MyButton info={info} />
      <button onClick={e => setShow(!show)}>点击切换</button>
    </div>
  )
}

useRef的外围用法

应用ref援用DOM。

export default function RefHook() {
  const titleRef = useRef();

  const changeDOM = () => {
    titleRef.current.innerHTML = "援用DOM"
  }
  return (
    <div>
      <h2 ref={titleRef}>这是useRef的外围用法</h2>
      <button onClick={e => changeDOM()}>点击切换</button>
    </div>
  )
}

函数式组件是不能间接给ref的。

函数组件能够通过React.forwardRef进行包裹来应用ref。

const Test = React.forwardRef((props,ref) => {
  return (
    <div>
      <h1>这是Test组件</h1>
    </div>
  )
})

应用useRef跨足剑周期保留数据

export default function RefHook() {
  const [count,setCount] = useState(0);
  const countRef = useRef(count);

  return (
    <div>
      <h2>useRef中保留的值：{countRef.current}</h2>
      <h2>这是count的值：{count}</h2>
      <button onClick={e => setCount(count + 1)}>点击+1</button>
    </div>
  )
}

useImperativeHandle的外围用法

之所以要有useImperativeHandle这个钩子函数，是为了避免父组件通过ref获取到子组件的所有权限，通过useImperativeHandle能够让子组件指定对外裸露的性能。

const Son = forwardRef((props,ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref,() => ({
    focus: () => {
      inputRef.current.focus();
    }
  }))

  return (
    <input type="text" ref={inputRef} />
  )
})

export default function RefHook() {
  const sonRef = useRef()
  return (
    <div>
      <Son ref={sonRef} />
      <button onClick={e => sonRef.current.focus()}>点击聚焦</button>
    </div>
  )
}

useLayoutEffect的外围用法

useLayoutEffect和useEffect的区别次要有以下两点：

useEffect是在DOM更新实现之后执行，不会阻塞DOM的更新。
useLayoutEffect会在更新DOM之前执行，会阻塞DOM的更新。

如果心愿在某些操作产生之后再去更新DOM，那么这个操作应该放在useLayoutEffect中执行。次要是解决闪动问题。

export default function LayoutDemo() {
  const [count,setCount] = useState(10);

  // useEffect会在渲染之后执行
  // useEffect(() => {
  //   if (count === 0) {
  //     setCount(Math.random());
  //   }
  // },[count])

  // useLayoutEffect会在渲染之前执行
  useLayoutEffect(() => {
    if (count === 0) {
      setCount(Math.random());
    }
  },[count])

  return (
    <div>
      <h1>以后随机数为：{count}</h1>
      <button onClick={e => setCount(0)}>点击设置为随机数</button>
    </div>
  )
}

自定义Hook的外围用法（次要还是用于逻辑复用）

自定义Hook的实质是一种函数代码逻辑的抽取。自定义组件必须以use结尾，否则会报错。

上面的这个自定义Hook就是对组件的挂载和卸载中反复的逻辑进行复用。

export default function CustomHook() {
  useInfo('CustomHook');
  return (
    <div>
      <h1>这是测试自定义Hook</h1>
    </div>
  )
}

function useInfo(name) {
  useEffect(() => {
    console.log(`${name}组件被挂载了~`);
    return () => {
      console.log(`${name}组件被卸载了~`);
    };
  }, []);
}

自定义Hook和一般的函数封装的区别在于，自定义Hook能够应用默认的Hooks，相似于useState等，然而一般的函数不能应用，这也就是为什么自定义Hook在命名时须要以use结尾。

react-router的外围用法

装置react-router-dom

yarn add react-router-dom

react-router中最外围的API

BrowserRouter和HashRouter

Router中蕴含了对门路扭转的监听，并且会将相应的门路传递给子组件。
BrowserRouter应用History模式。
HashRouter应用Hash模式。

Link和NavLink

个别门路的跳转应用Link组件，其最终会被渲染成a元素。
NavLink是在Link根底上减少一些款式属性。
to属性，指定跳转到的门路。

Route

Route用于门路的匹配
path属性：用于设置匹配到的门路。
component属性：设置匹配到的门路后，渲染的组件。
exact：精准匹配，只有精准匹配到完全一致的门路，才会渲染对应的组件。

根本应用

上面应用的是一些新个性：

export default function RouteTest() {
  return (
    <div>
      <BrowserRouter>
        <Link to="/" >首页</Link>
        <Link to="/about" >对于</Link>

        <Routes>
          {/* <Route path="/" component={Home} />
          <Route path="/about" component={About} /> */}          {/* 上面是React18的新语法 */}          <Route path="/" element={<Home />} />          <Route path="/about" element={<About />} />        </Routes>

      </BrowserRouter>
    </div>
  )
}

留神：Link都会显示成a标签，然而并不是所有的Route都会显示，Route所在的区域就是命中路由的组件要显示的区域。咱们能够把Route了解为占位符。

react-router的不同版本的特点都是不一样的，因而，有些特定性能的用法肯定要依据版本去官网查用法，例如上面的这个给选中的link扭转色彩，就是通过这个版本对应的官网查到的。

react-router-V6

export default function RouteTest() {
  let activeStyle = {
    color: "red",
  };
  return (
    <div>
      <BrowserRouter>
        <Routes>
          {/* <Route path="/" component={Home} />
          <Route path="/about" component={About} /> */}          {/* 上面是React18的新语法 */}          <Route exact path="/" element={<Home />} />          <Route exact path="/about" element={<About />} />        </Routes>


        <NavLink to="/"           style={({ isActive }) =>
          isActive ? activeStyle : undefined        }>          首页        </NavLink>
        <NavLink to="/about"
          style={({ isActive }) =>
            isActive ? activeStyle : undefined          }>          对于        </NavLink>
      </BrowserRouter>
    </div>
  )
}

须要留神的是在react-router(V6)版本中Switch曾经被Routes取代了。

路由重定向

重定向和Link的区别在于，Link是须要用户点击的，重定向能够是JS执行的。

在V6版本的react-router-dom中重定向Redirect曾经被Navicat这个API取代了、

import {Navigate} from 'react-router-dom'

const User = () => {
  const [isLogin] = useState(false);
  return isLogin ? (
    <div>
      <h1>这是User组件</h1>
    </div>
  ) : <Navigate to="/login"/>;
}

动静路由

须要留神的是，设置动静路由的时候最好在某个门路下应用，而不是间接就是一个动静路由，那样容易呈现拦挡到意外路由的状况。

<Route  path="/user/:id" element={<User />} />

应用useParams获取动静路由的值。

import {Navigate,useParams} from 'react-router-dom'

const User = () => {
  const [isLogin] = useState(true);
  const params = useParams();
  console.log(params);
  return isLogin ? (
    <div>
      <h1>这是User组件</h1>
    </div>
  ) : <Navigate to="/login"/>;
}

应用useSearchParams获取查问字符串（通过原型对象上的get办法来获取值）

import {Navigate,useSearchParams} from 'react-router-dom'

const User = () => {
  const [isLogin] = useState(true);
  const [searchParams,setSearchParams] = useSearchParams();
  console.log(searchParams);
  console.log(searchParams.get('name'));
  return isLogin ? (
    <div>
      <h1>这是User组件</h1>
    </div>
  ) : <Navigate to="/login"/>;
}

应用遍历的形式获取到所有的查问字符串

import {Navigate,useSearchParams} from 'react-router-dom'

const User = () => {
  const [isLogin] = useState(true);
  const [searchParams,setSearchParams] = useSearchParams();
  searchParams.forEach((item,key) => {
    console.log(item,key);
  })
  console.log(searchParams.get('name'));
  return isLogin ? (
    <div>
      <h1>这是User组件</h1>
    </div>
  ) : <Navigate to="/login"/>;
}

应用react-router-config简化路由的编写

具体能够通过查看官网应用。

react-router-config

嵌套路由

嵌套路由咱们能够了解为路由中的路由。（须要应用Outlet进行占位，具体看上面的链接中的文章。）

  <BrowserRouter>
    <Routes>
      <Route exact path="/about" element={<About />}>        <Route path="culture" element={<AboutCulture />} />        <Route path="contact" element={<AboutContact />} />      </Route>
  </BrowserRouter>

react-router v6 应用(这篇文章讲的特地好)

手动路由跳转

在react-router-dom 6版本中history这个API被useNavigate取代了。

const About = () => {
  const navigate = useNavigate()
  return (
    <div>
      <NavLink to="/about/culture">企业文化</NavLink>
      <NavLink to="/about/contact">分割咱们</NavLink>
      <button onClick={e => navigate('/about/join')}>点击退出咱们吧~</button>
      <Outlet />

    </div>
  );
}

关于react.js:react进阶用法完全指南

React调用回调函数，正确设置this指向的三种办法

绑定事件传递参数

React实战视频解说：进入学习

条件渲染

列表渲染

脚手架的根本应用

组件通信

1. 父组件向子组件传递数据通过props

2. 子组件向父组件传递数据通过回调函数

3. 跨组件层级通信（Context）(类组件)

4. 任意组件通信（事件总线event bus）

参数验证

React实现slot

性能优化

应用ref操作DOM

受控组件和非受控组件

受控组件

非受控组件

高阶组件

高阶组件的利用一：加强props

高阶组件的其余利用

portals的应用

fragment

React中的CSS

内联款式

组件文件夹下独自引入css

CSS modules

CSS IN JS

应用classnames库给React动静增加className

Antd的根本应用

脚手架场景下

通过craco对antd主题进行配置

给文件夹门路起别名

评论组件案例

axios的应用和封装

二次封装axios

React Hooks

为什么须要Hooks?

class组件存在的问题

为什么叫做Hook?

应用Hooks的两个规定

useState的外围用法

useEffect的外围用法

useContext的外围用法

useReducer的外围用法

useCallback的外围用法

useMemo的外围用法

useRef的外围用法

useImperativeHandle的外围用法

useLayoutEffect的外围用法

自定义Hook的外围用法（次要还是用于逻辑复用）

react-router的外围用法

react-router中最外围的API

BrowserRouter和HashRouter

Link和NavLink

Route

根本应用

路由重定向

动静路由

应用react-router-config简化路由的编写

嵌套路由

手动路由跳转

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复