React学习笔记(二)
文章目录
前言
例如:B站学习笔记,记录知识点,方便复习。
提示:以下是本篇文章正文内容,下面案例可供参考
一、基础知识
1.输入框的双向绑定
代码如下(示例):通过value属性绑定状态,通过onChange属性绑定状态同步的函数。
const [value,setValue] = useState('')
<input value={value}
onChange={(e)=>setValue(e.target.value)
type='text'} />
2.获取DOM
代码如下(示例):需要使用useRef钩子函数
const inputRef = useRef(null)
<input type='text' ref={inputRef} />
//渲染完毕之后(dom生成之后)才能使用
console.log(inputRef.current)
//输入框实现聚焦
inputRef.current.focus()
3.uuid随机生成id
uuid:通用唯一识别码(Universally Unique Identifier)
代码如下(示例):需要使用uuid插件
//安装:
npm install uuid
//TS环境引入
import { v4 as uuidv4 } from 'uuid';
//js环境引入
const { v4: uuidv4 } = require('uuid');
//使用:
{
id:uuidv4()
}
4.时间格式化Day.js
需要使用day.js插件,中文网地址: https://dayjs.fenxianglu.cn/category/#node-js
//安装:
npm install dayjs
//引入:
import {dayjs} from 'dayjs'
//使用:
{
time:dayjs(new Date()).format('MM-DD hh:mm')
}
5.父传子
知识点:
1、父组件穿件数据 - 在子组件标签上绑定属性
2、子组件接收数据 - 子组件通过props参数接收数据
3、props可传递任意数据:数字、字符串、布尔值、数组、对象、函数、JSX
4、props是只读对象:子组件只能读取props中的数据,不能直接进行修改,父组件的数据只能由父组件修改
5、特殊的prop: children,把内容嵌套在子组件标签中,父组件会自动在名为children的prop属性中接收改内容。
function ParentApp() {
const name = "父组件数据";
return (
<div>
<p>父组件展示区域</p>
<SonApp
name={name}
age={15}
isTrue={false}
list={["vue", "react"]}
child={<span>this is span</span>}
obj={{ name: "jack" }}
cb={() => console.log("123")}
>
<span>子组件默认插槽</span>
</SonApp>
</div>
);
}
function SonApp(props) {
// props参数:是一个对象,包含了父组件传递过来的所有数据
return (
<div>
<div>子组件展示区域:{props.name}</div>
<div>子组件插槽区域:{props.children}</div>
</div>
);
}
export default ParentApp;
5.子传父
核心思路:在子组件中调用父组件中的函数并传递参数
import { useState } from "react";
function Son({ onGetMsg }) {
const msg = "我是子组件的数据";
return <button onClick={() => onGetMsg(msg)}>按钮</button>;
}
function Parent() {
const [message, setMessage] = useState();
const getMsg = (msg) => {
setMessage(msg);
};
return (
<div>
this is Parent
<Son onGetMsg={getMsg} />
<div>父组件显示子组件数据:{message}</div>
</div>
);
}
export default Parent;
6.兄弟组件通信
核心思路:借助“状态提升”机制,通过父组件进行兄弟之间的数据传递
1、A组件先通过子传父的方式把数据传给父组件App
2、App拿到数据后通过父传子的方式再传递给B组件
import { useState } from "react";
function A({ onGetAMsg }) {
const msg = "A中的数据";
return (
<div>
<span>this is A</span>
<button onClick={() => onGetAMsg(msg)}>A按钮</button>
</div>
);
}
function B({ data }) {
return <div>this is B,即将显示:{data}</div>;
}
function Parent() {
const [data, setData] = useState("");
const getAMsg = (msg) => {
setData(msg);
};
return (
<div>
<A onGetAMsg={getAMsg} />
<B data={data} />
</div>
);
}
export default Parent;
7.Context跨层级组件通信
核心思路:借助“Context”机制
1、使用createContext方法创建一个上下文对象Ctx
2、在顶层组件(App)中通过Ctx.Provider组件提供数据
3、在底层组件(B)中通过useContext钩子函数获取消费数据
// A->B->C
import { createContext, useContext } from "react";
// >1、使用createContext方法创建一个上下文对象Ctx
const MsgContext = createContext();
// >2、在顶层组件(App)中通过Ctx.Provider组件提供数据
// >3、在底层组件(B)中通过useContext钩子函数获取消费数据
function A() {
const msg = "this is a msg";
return (
<div>
<MsgContext.Provider value={msg}>
this is A <B />
</MsgContext.Provider>
</div>
);
}
function B() {
return (
<div>
this is B <C />
</div>
);
}
function C() {
const msg = useContext(MsgContext);
return <div>this is C,{msg}</div>;
}
export default A;
8.useEffect
概念理解:useEffect是一个React Hook函数,用于在React组件中创建不是由事件引起而是由渲染本身引起的操作,比如发送ajax请求,更改Dom等等
需求:在组件渲染完毕后,立刻从服务端获取频道列表数据并显示到页面中
语法:useEffect( ())=>{ } , [] )
参数1是一个函数,可称为副作用函数,在函数内部可以放置要执行的操作。
参数2是一个数组(可选参),在数组里放置依赖项,不同依赖项会影响第一个参数的执行。当是一个空数组时,副作用函数只会在组件渲染完毕后执行一次。
组件更新:点击按钮数字加1,数据变化导致页面更新,触发useEffect里的函数执行
useEffect-清除作用
需求:在son组件渲染时开启一个定时器,卸载该组件时清除这个定时器。
import { useEffect, useState } from "react";
function Son() {
useEffect(() => {
const timer = setInterval(() => {
console.log("定时器执行中....");
}, 1000);
// 不写return 卸载组件后定时器依旧继续执行
return () => {
clearInterval(timer);
};
}, []);
return <div>this is son</div>;
}
function UseEffApp() {
const [data, setData] = useState(0);
const [show, setShow] = useState(true);
const add = () => {
setData(data + 1);
};
useEffect(() => {
console.log("不写参数");
}, [data]);
return (
<div>
{data}
{show && <Son />}
<button onClick={add}>测试执行机制</button>
<button onClick={() => setShow(false)}>卸载son组件</button>
</div>
);
}
export default UseEffApp;
9.自定义hook
封装自定义hook通用思路:
1、声明一个以use开头的函数
2、在函数体内封装可复用的逻辑
3、把组件中用到的状态或者回调return出去(对象或数组)
4、在哪个组件中要用到这个逻辑就执行这个函数,解构出来状态和回调函数进行使用
import { useState } from "react";
function useToggle() {
const [show, setShow] = useState(true);
const changeFun = () => setShow(!show);
return {
show,
changeFun,
};
}
function CustomeHook() {
const { show, changeFun } = useToggle();
return (
<div>
{show && <div>是否展示</div>}
<button onClick={changeFun}>自定义按钮</button>
</div>
);
}
export default CustomeHook;
10、ReactHooks使用规则
1、只能在组件中或者其他自定义Hook函数中调用
2、只能在组件的顶层调用,不能嵌套在if、for等其他函数中