黑马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)// toodreturn () => {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 组件封装

略