React：Hook

// 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 [网址]( )

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

const initialState = {

count: 0

};

function reducer(state, action) {

switch (action.type) {

case “increment”:

return {count: state.count + 1};

case “decrement”:

return {count: state.count - 1}

}

}

function Counter() {

const [state, dispatch] = useReducer(reducer, initialState);

return (

计算结果: {state.count}

<button onClick={()=>dispatch({type: ‘increment’})}>+

<button onClick={()=>dispatch({type: ‘decrement’})}>-

)

}

export default Counter;

⑪ usecontext

import React, {useContext} from ‘react’

const themes = {

dark: {

width: 100,

height: 40,

borderRadius: 10,

border: ‘none’,

color: ‘green’,

backgroundColor: ‘orange’

}

};

const ThemeContext = React.createContext();

function App() {

return (

<ThemeContext.Provider value={themes.dark}>

</ThemeContext.Provider>

)

}

function ToolBar() {

return (

)

}

function ThemedButton() {

const theme = useContext(ThemeContext);

console.log(theme);

return (

点我一下

)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
onst theme = useContext(ThemeContext);

console.log(theme);

return (

点我一下

)

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-Egu6bRZq-1715588293539)]

[外链图片转存中…(img-r1uc14Pp-1715588293539)]

[外链图片转存中…(img-bp6jwXIj-1715588293539)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！