React使用钩子增强组件

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

概述

《React零基础入门班》收费说明：

时长：10节课

价格：1000元

内容：React从入门到项目实战

上课方式：腾讯会议小班教学

本篇文章是《React零基础入门班》的第9篇文章，前面还有：

《第一个React程序》

《React常用方法》

《React使用JSX开发菜谱应用》

《使用webpack让React模块化》

《React的状态管理》

《React组件事件通知》

《React实现Form表单》

《React上下文》

复选框组件

目标

1、编写一个复选框组件

2、在根组件渲染复选框组件

复选框组件完整代码

components/CheckBox.js

import from "react";

export default function CheckBox() {

const [checked, setChecked] = useState(false)

alert(`checked: $`)

return (

type="checkbox"

value=

onChange={() => setChecked(checked => !checked)}

/>

)

}

根组件完整代码

App.js

import CheckBox from "./components/CheckBox";

export default function App() {

return (

)

}

优化复选框组件

目标

之前的代码中，由于alert会阻塞线程，所以组件不会被立即渲染。想要在渲染的组件的同时做其他的事情，可以使用useEffect。

我们可以在渲染的同时打印checked的值，存储其值，让输入框聚焦等。

复选框组件优化完整代码

components/CheckBox.js

import from "react";

export default function CheckBox() {

const [checked, setChecked] = useState(false)

useEffect(() => {

console.log(`checked: $`)

})

return (

type="checkbox"

value=

onChange={() => setChecked(checked => !checked)}

/>

)

}

使用reducer优化

用法：

useReducer(checked => !checked, false)

第一个参数是切换方法，第二个参数是初始值。useReducer返回一个初始的值和一个切换方法。

components/CheckBox.js

import from "react";

export default function CheckBox() {

const [checked, toggle] = useReducer(checked => !checked, false)

useEffect(() => {

console.log(`checked: $`)

})

return (

type="checkbox"

value=

onChange=

/>

)

}

监听特定值的变化

目标

1、创建一个输入框和一个按钮

2、记录输入框的值，每次点击按钮发送输入框的值

3、监听输入框的值变化和发送的值变化

短语组件完整代码

components/Phrase.js

import from "react";

export function Phrase() {

// 输入框的值

const [value, setValue] = useState("")

// 短语的值

const [phrase, setPhrase] = useState("示例短语")

// 创建短语的方法

const createPhrase = () => {

setPhrase(value)

setValue("")

}

// 监听输入框值的变化

useEffect(() => {

console.log("输入的值：", value)

})

// 监听短语值的变化

useEffect(() => {

console.log("输入的短语：", phrase)

})

return (

喜欢的短语

value=

placeholder=

onChange=

/>

发送

)

}

根组件完整代码

App.js

import from "./components/Phrase";

export default function App() {

return (

)

}

问题引出

每次我们修改输入框的值，useEffect都会被重新执行。我们不需要每次都执行，这个时候可以使用依赖数组进行优化，只有在特定值变化时，才触发useEffect。

优化代码

// 监听输入框值的变化

useEffect(() => {

console.log("输入的值：", value)

}, [value])

// 监听短语值的变化

useEffect(() => {

console.log("输入的短语：", phrase)

}, [phrase])

短语组件优化完整代码

import from "react";

export function Phrase() {

// 输入框的值

const [value, setValue] = useState("")

// 短语的值

const [phrase, setPhrase] = useState("示例短语")

// 创建短语的方法

const createPhrase = () => {

setPhrase(value)

setValue("")

}

// 监听输入框值的变化

useEffect(() => {

console.log("输入的值：", value)

}, [value])

// 监听短语值的变化

useEffect(() => {

console.log("输入的短语：", phrase)

}, [phrase])

return (

喜欢的短语

value=

placeholder=

onChange=

/>

发送

)

}

总结