React：Hook

② 也不支持生命周期方法，因此无法取代类

2. React Hooks 诞生：React Hook 就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件

二、什么是React Hook

==========================================================================

1. 什么是React Hook

---

1. Hook

钩子

2. React Hooks 含义

① 组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来

② React Hooks 就是那些钩子

3. 使用React Hook

① 概念

1. React 默认提供了一些常用钩子

2. 我们也可以封装自己的钩子

3. 所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别

4. 你要使用 xxx 功能，钩子就命名为 usexxx

② 常用钩子

1. useState()

2. useContext()

3. useReducer()

4. useEffect()

5. 案例实操

① useState基本使用

// 1. 常规写法

// import React from ‘react’

//

// export default class Like001 extends React.Component {

// state = {

// age: 0

// }

//

// render() {

// return (

//

//

我今年{this.state.age}岁了！

// <button onClick={() => this.setState({age: this.state.age + 1})}>按钮

//

// );

// }

// }

// 2. hook使用 ——> useState

import React, {useState} from ‘react’

export default () => {

// 2.1 使用钩子

const [age, setAge] = useState(0);

const name = useState(‘KaiSarH’)

return (

老子是{name}

我今年{age}岁了！

<button onClick={() => setAge(age + 1)}>按钮

)

}

② useEffect基本使用

// 1. 常规写法

// import React from ‘react’

//

// export default class Like001 extends React.Component {

// state = {

// count: 0

// }

//

// componentDidMount() {

// document.title = 点击了${this.state.count}次！

// }

//

// componentDidUpdate(prevProps, prevState, snapshot) {

// document.title = 点击了${this.state.count}次！

// }

//

// render() {

// return (

//

//

点击了{this.state.count}次！

// <button onClick={() => this.setState({count: this.state.count + 1})}>增加

//

// );

// }

// }

// 2. hook使用 ——> useState、useEffect

import React, {useState, useEffect} from ‘react’

export default () => {

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

// useEffect——componentDidMount componentDidUpdate componentWillUnmount

useEffect(() => {

document.title = 点击了${count}次

});

return (

点击了{count}次！

<button onClick={() => setCount(count + 1)}>按钮

)

}

③ todo简单案例

④ useEffect第二个参数运用

1. []相当于生命周期函数的：componentDidMount

2. 有第二个参数：相对于生命周期函数：componentDidMount componentDidUpdate

// // 1. 常规写法

// import React from ‘react’

//

// export default class Like003 extends React.Component {

// state = {

// count: 0,

// name: ‘KaiSarH’

// }

//

// componentDidMount() {

// document.title = 点击了${this.state.count}次！

// }

//

// componentDidUpdate(prevProps, prevState, snapshot) {

// // document.title = 点击了${this.state.count}次！

// if (prevProps.count !== this.state.count) {

// document.title = 点击了${this.state.count}次！

// }

// }

//

//

// _dealCountClick() {

// this.setState({

// count: this.state.count + 1

// })

// }

//

// _dealNameClick() {

// // let name = this.state.name === ‘King James’ ? ‘KaiSarH’ : ‘King James’;

// this.setState({

// name: ‘King James’

// })

// }

//

// render() {

// return (

//

//

点击了{this.state.count}次！

//

{this.state.name}

// <button onClick={() => this._dealCountClick()}>数量

// <button onClick={() => this._dealNameClick()}>名字

//

// );

// }

// }

// 2. hook使用 ——> useState、useEffect

import React, {useEffect, useState} from ‘react’

export default () => {

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

const [name, setName] = useState(‘KaiSarH’);

/*

• 1. 如果不加第二个参数，默认是执行：componentDidMount componentDidUpdate
• 2. 加了中括号，默认执行componentDidMount
• 3. [状态]：只有状态发生改变时，才能触发componentDidUpdate

• */

useEffect(() => {

console.log(‘执行了·······’)

document.title = 点击了${count}次

// return 中返回的相当于在componentWillUnMount

return {

}

}, [count])

return (

姓名：{name}

次数：{count}

<button onClick={() => setCount(count + 1)}>加一

<button onClick={() => setName(‘King James’)}>名称

)

}

// 1. 常规写法

import React, {useState, useEffect} from ‘react’

import ReactDOM from ‘react-dom’

const AgeAPI = {

age: 0,

subscribe(callBack) {

this.intervalId = setInterval(() => {

console.log(‘定时器正在执行’)

this.age += 1;

callBack(this.age);

}, 1000);

},

unsubscribe() {

clearInterval(this.intervalId);

}

};

// class Like004 extends React.Component {

// state = {

// age: 0

// }

//

// componentDidMount() {

// AgeAPI.subscribe((age) => {

// this.setState({

// age

// })

// })

// }

//

// componentWillUnmount() {

// AgeAPI.unsubscribe();

// }

//

// render() {

// return (

//

//

我是树妖，今年{this.state.age}岁了！

// <button onClick={() => ReactDOM.unmountComponentAtNode(document.getElementById(‘root’))}>砍树

//

// );

// }

// }

//

// export default Like004;

const Like004 = () => {

const [age, setAge] = useState(0);

useEffect(() => {

AgeAPI.subscribe((currentAge) => {

setAge(currentAge)

})

// 处理副作用代码，相当于在componentWillUnmount

return () => {

AgeAPI.unsubscribe();

}

}, [])

return (

我是树妖{age}

<button onClick={() => ReactDOM.unmountComponentAtNode(document.getElementById(‘root’))}>砍树

)

}

export default Like004;

⑤ hook中使用网络请求

import React, {useEffect, useState} from ‘react’

import ajax from “…/http”;

const Like005 = () => {

const [data, setDate] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

(async () => {

const response = await ajax(‘http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001?itlike=87224866875667849947’)

setDate(response.data.data);

setLoading(false);

})()

}, [])

return (

{loading ?

正在拼命加载中

: data.cate[0].name}

)

}

export default Like005;

import React, {useEffect, useState} from ‘react’

import ajax from “…/http”;

const useAjax = (url) => {

const [data, setDate] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

(async () => {

const response = await ajax(url)

setDate(response.data.data);

setLoading(false);

})()

}, [])

return {data, loading}

}

const Like005 = () => {

const {data, loading} = useAjax(‘http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001?itlike=87224866875667849947’);

return (

{loading ?

正在拼命加载中

: data.cate[0].name}

)

}

export default Like005;

⑥ Hook 使用规则

1. 网址

2. 只在最顶层使用 Hook

3. 只在 React 函数中调用 Hook

⑦ Hook中处理副作用操作

⑧ 性能优化：对比文档前后，如果没有变化就不进行渲染

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

篇幅有限，仅展示部分内容