type
status
date
slug
summary
tags
category
icon
password
事件绑定
语法： on + 事件名称 = { 事件处理程序 }， 整体上遵循驼峰命名法
调用函数
传入点击事件
如果要传递点击事件e，直接在参数上传入e
传入自定义参数
如果要传入自定义参数，事件绑定的位置需要改成箭头函数的写法
传入自定义参数和点击事件
既要自定义参数，又要点击事件e
React组件
在React中，一个组件就是首字母大写的函数，内部存放组件的逻辑和UI，渲染组件只需要当成标签书写即可
useState使用
概念及基础使用
概念： useState是一个 React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质： 和普通JS变量不同，状态变量一旦发生变化，组件的视图UI也会跟着发生变化（数据驱动视图）
用法：
const [count, setCount] = useState(0)useState是一个函数，返回的是一个数组
- 数组中第一个参数是状态变量，第二个参数是set函数用来修改状态变量
useState的参数将作为count的初始值
修改值
状态不可变： 在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发试图更新
修改对象状态
规则： 对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改
在
setForm 中，使用 ...form 将form对象拆解出来，后面跟上name，如果原对象中有name字段则会替换，如果没有则新添一字段组件样式控制
两种方法：一种是行内样式，一种是class类名控制
行内样式
style属性名都使用驼峰命名，
font-size -> fontSize或者将样式抽离成对象，然后使用JSX写法写入
class类名控制
React规定，使用类名是属性名为
className （和vue不同，vue中是 class ）classnames优化类名控制
classnames是一个简单的JS库，可以非常方便的通过条件动态控制class类名的显示
安装：
npm install classnamesnav-item 是静态类名，active 是根据条件动态变化，现在的问题是字符串的拼接方式不够直观，而且如果较多内容则容易出错使用classnames库，可以将静态和动态分开书写，前面写静态类名，后面每一个对象都表示动态类名及生效的条件，更加直观可维护
动态类名 key表示要控制的类名，value表示条件，true的时候类名显示
表单受控绑定
概念： 使用React组件的状态（useState）控制表单的状态
- 准备一个React状态值
- 通过value属性绑定状态，通过
onChange属性绑定状态同步的函数
在React中获取DOM元素
使用
useRef 函数获取DOM对象useRef生成ref对象，绑定到DOM标签身上
- DOM可用时，
ref.current获取DOM对象
组件通信
概念： 组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法。父子通信、兄弟通信、跨层通信
父子通信
父传子
- 父组件传递数据——在子组件标签绑定属性
- 子组件接收数据——子组件通过props参数接收数据
props 可以传递任意的数据：数字、字符串、布尔值、数组、对象、函数、JSXprops 是只读对象，子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改特殊的prop children： 当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接受该内容
则props对象会存在children属性，值为
<span/>子传夫
核心思路： 在子组件中调用父组件的函数并传递参数
- 在父组件中定义方法，传递给子组件
- 子组件接受方法，然后调用方法，将子组件的值作为实参传递出去给父组件
- 如果父组件中要响应更新视图，则需要使用
useState
兄弟通信
使用状态提示
实现思路： 借助”状态提升“机制，通过父组件进行兄弟组件之间的数据传递
- A组件先通过子传父的方法把数据传给父组件App
- App拿到数据后通过父传子的方式再传递给B组件
跨层通信
使用Context机制
- 使用
creatContext方法创建一个上下文对象Ctx
- 在顶层组件（App）中通过
Ctx.Provider组件提供数据
- 在底层组件（B）中通过
useContext钩子函数获取消费数据
useEffect使用
概念及基础使用
概念：useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求，更改DOM等
需求：在组件渲染完毕后，立即从服务端获取频道列表数据并显示到页面中
语法：
useEffect(() => { }, [])参数1是一个函数，可以叫做副作用函数，在函数内部可以放置要执行的操作
参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数的执行，当是一个空数组时，副作用函数只会在组件渲染完毕之后执行一次
不同依赖项参数说明
useEffect 副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现
依赖项 | 副作用函数执行时机 |
没有依赖项 | 组件初始渲染+组件更新时执行 |
空数组依赖 | 只在初始渲染时执行一次 |
添加特定依赖 | 组件初始渲染+特定依赖项变化时执行 |
清除副作用
在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用，如果不清除可能会导致内存泄漏
说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行
自定义Hook函数
概念及基础使用
概念：自定义Hook是以use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用
封装通用思路：
- 声明一个use打头的函数
- 把函数体内封装可复用的逻辑（只要是可复用的逻辑）
- 把组件中用到的状态或者回调return出去（以对象或数组的形式）
- 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调函数进行使用
ReactHooks使用规则
- 只能在组件中或者其他自定义Hook函数中调用
- 只能在组件的顶层调用，不能嵌套在if、for、其他函数中
Relate Posts