React：Hook

// 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中处理副作用操作

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

1. React.PureComponent

import React from ‘react’

import Other from ‘./other’

// export default class Like008 extends React.Component

export default class Like008 extends React.PureComponent{

state = {

age: 0

};

/*

componentDidMount() {

setInterval(()=>{

this.setState({

// age: this.state.age + 1

age: 100

})

}, 1000);

}

*/

componentDidMount() {

setInterval(()=>{

this.setState({

age: this.state.age + 1

})

}, 1000);

}

render() {

console.log(‘render被调用了~~~~’);

return (

{this.state.age}

)

}

}

2. React.memo

import React from ‘react’

const Other = ({otherName})=>{

console.log(‘other组件中的render被调用了’);

return (

我叫: {otherName}

)

};

// export default Other

export default React.memo(Other);

⑨ useCallback使用

13. 示例

const memoizedCallback = useCallback(

() => {

doSomething(a, b);

},

[a, b],

);

14. 实操

① 第二个参数决定了是否允许第一个参数执行

② 二个参数发生变化则允许执行，否则则不允许执行

③ 第一个参数第一次会执行一次，之后才会判断第二个参数是否发生变化然后再执行

/*

useCallback

网址: https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback

const memoizedCallback = useCallback(

() => {

doSomething(a, b);

},

[a, b],

);

• 第二个参数b决定了是否允许第一个参数执行

• 第一个参数第一次会执行, 之后会根据第二个参数的变化决定是否执行

*/

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

const Like009 = ()=>{

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

const [weight, setWeight] = useState(50);

function clickHandler() {

setAge(age + 1);

}

return (

年龄: {age} 岁

年龄+1

体重: {weight}千克

{/<button onClick={()=>{setWeight(weight + 1)}}>体重+1/}

<button onClick={

useCallback(()=> setWeight(weight + 1), [age])

}>体重+1

)

};

export default Like009;

⑩ usereducer [网址]( )

最后

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它