黑马ReactDay02

Day02-01集 受控表单

通过 useState控制表单状态
input 组件的值受useState
这里是给input绑定onChange 事件来完成的

Day02-02集 从React中获取DOM

使用 useRef 钩子

// 创建ref对象并与jsx绑定
const inputRef = useRef(null)
<input type="text" ref={inputRef} />

dom可用时,ref.current 获取 dom

function App(){
	const inputRef = useRef(null)
	const showDom = () => {
		console.log(inputRef.current)
	}
	return (
		<div>
			<input ref={inputRef}/>
			<button onClick={showDom}>获取dom</button>
		</div>
	)
}

Day02-03集 B站发表评论

思路 : 使用 useState 设置 [content,setContent]
给 textarea 绑定 onChange 方法

// textarea
value={content}
onChange={(e) => setContent(e.target.value)}

// div 添加方法
onClick={handlePush}
// 这个方法在setCommentList中,展开,拼接
setCommentLis([
	...commentList,
	{
		...
	}
])

Day02-04集 id处理和时间处理

id处理

id使用uuid.js 实现 npm install uuid
import {v4 as uuidv4} from 'uuid' uuid() :生成一个唯一的uuid ``

// 在 useState 里面使用 setCommoentList 中,使用这个方法

时间处理

npm install dayjs const dayjs = require('dayjs') dayjs.format()
具体使用,请参考 dayjs的官网

day02 05集 发送评论清空并focus

``思路

1. 先清空input的value
2. 在获取当前dom并进行focus
   inputRef.current.focus
   ``

day02 06集 07集 组件通信-props

不同的组件进行通信
父子 兄弟 祖孙
子父 弟兄 孙祖

父子

// 父组件传递数据
// 子组件标签上绑定属性
// 子组件接收数据 props--包含了父组件传递的所有数据
function Son(props){
	// 这里打印的就是 {name:'this is app name'}
	console.log(props)
	return <div>this is son,{props}</div>
}
function App(){
	const name = 'this is app name'
	return (
		<div>
			<Son name={name}/>
		</div>
	)
}

porops里面的对应关系如上图

可传递数据类型 props子组件不可修改props里面数据

day02 08集特殊的props-children

function Son(props){
	console.log(props) // 这里打印的props有一个children,是一个节点,里面是一个span元素
	return (<div>this is son's span</div>)
}
function App(){
	return (
		<Son>
			<span>this is father's span</span>
		</Son>
	)
}

使用

function Son(props){
	console.log(props) // 这里打印的props有一个children,是一个节点,里面是一个span元素
	return (<div>this is son's span,{props.children}</div>)
}
function App(){
	return (
		<Son>
			<span>this is father's span</span>
		</Son>
	)
}

day02 09集 子传父

在子组件中调用父组件传递的函数,传递参数

function App(){
	const getMsg = (msg) => {console.log(msg)}
	return (<div><Son onGetMsg={getMsg}/></div>)
}
// 这个 onGetMsg 和 上面的一样,应该可以在props里面看到.
// 这里是解构赋值
function Son({onGetMsg}){
	const msg = 'this is son\'s msg'
	return (
		<div><button onClick={onGetMsg(msg)}>click me!!!</button></div>
	)
}

02 10集 使用状态提升,兄弟组件通信 A->B

就是通过共同的父组件,进行兄弟数据传递

02 11集 使用context跨层传递数据 APP 里面使用 A组件,A里面使用 B组件

1使用 createContext 创建上下文对象 Ctx 2在顶层组件APP中通过 Ctx.Provider()提供数据 3在底层组件B中通过useContext钩子函数消费数据

第1步
const MsgContext = createContext()

第2步
function A(){
	return (
		<div>
			this is A component
			<B />
		</div>
	)
}
function App(){
	const msg = 'this is app msg'
	return (
			<MsgContext.Provider value={msg}>
				this is App
				<A />
			</MsgContext.Provider>
	)
}

第3步
function B(){
	const msg = useContext(MsgConttext)
	return (
		<div>
			this is B component,{msg}
			<B />
		</div>
	)
}

day02 12集 13集 useEffect 副作用hook

在组件渲染完毕,在获取渲染数据的流程

useEffect(() => {},[])
// 第一个是要执行的函数
// 第二个参数决定了第一个函数执行的触发机会

1. []: 只有组件渲染完毕会执行一次
2. 没有依赖项,组件初次渲染后执行 useEffect(()=>{})
特定依赖项,组件渲染,特定依赖项变化时执行 const [count,setCount] = useState(0) useEffect = (() => {副作用执行了},[count]) 可以在button对count进行++,副作用函数可以一直执行

function App(){
	// 这里使用 useState 渲染组件
	const [list,setList] = useState()
	useEffect(() => {
		async function getList(){
			const res = await fetch(URL)
			const list = await res.json()
			console.log(list)
		}
		await const lists = getList() // 这里需要调用一次
		setState(lists)
	} // 这个函数会自动调用一次
	,[])
	return (
		<div>this is app
			<ul>
				{lists.map((item)=>{
					<li key={item.id}>{item.name}</li>
				})}
			</ul>
		</div>
	)
}

day02 14集 清除useEffect副作用

`` 这里设置一个定时器,然后再return ()=>{},进行清除即可

// 这些代码写在组件里面
useEffect(
	() ={
		// 需要执行的副作用函数
		const timer = setInterval(() => {},1000)
		// tood
		return () => {
			cleatInterval(timer) // 这在里进行清除
		} // 清除副作用
	}, // 副作用函数
	[] // 依赖项

)

day02 15集 自定义hook

以use开头的函数,实现逻辑的封装和复用
react提供的

function App(){
	const [value,setValue] = useState(true)
	const toggle = () => {setValue(!value)}
	return (
		<div>
			{value && <div>this is div</div>}
			<button onClick={toggle}>toggle</button>
		</div>
	)
}

这一集自己去看,不写这么详细了

day02 16集 ReactHook规则

1. 只能在组件中或其他自定义Hook中使用
2. 只能在组件顶层使用,在顶层声明,不能够放在if,for,其他函数中

day02 17集 使用 useEffect获取数据

安装 json-server 与 axios

day02 18集 自定义Hook封装请求逻辑

略

day02 19集 评论 item 组件封装

略