特点
组件化思维
单向数据流
虚拟dom
Facebook脸书公司
竞品
angular;vue
创建
npm i -g create-react-app
//(全局安装脚手架)
create-react-app myreact
//创建myreact项目
cd myreact npm start
//运行myreact项目
目录结构
jsx语法
1.说明: javascript与html混合的写法(需要编译器编译才能被浏览器执行)
2.{}执行js
3.有且只有一个根节点
4.{/*注释内容*/}
5.类名使用className
6.数组可以有html标签
7.style对象会自动展开
模板语法
文本渲染
列表渲染
条件渲染
组件
函数组件
负责展示,也称为视图组件
props父组件传递的参数
没有this
类组件
父组件处理数据,也称为容器组件
state数据
生命周期器
props父组件传递的参数
有this
推荐使用 函数组件
事件与响应函数
onClick={()=>{ 响应内容}}
onClick={this.say}
函数的参数
1.匿名函数
onClick={()=>this.say(参数)}
2.bind
onClick = {this.Hi.bind(this,参数)}
state数据
更新数据
this.setState({k:v})
表单
受控表单
state与表单绑定
<input value={this.state.msg} onChange={()=>this.setState({msg:e.target.value})}></input>
非受控表单
通过ref
import React, { createRef } from "react";
this.inpRef = createRef()
<input type="text" ref={this.inpRef}></input>
<button onClick={()=>alert(this.inpRef.current.value)}>获取值</button>
组件的传参
容器组件App
state.color
state.size
state.msg 文本
setColor
setSize两个方法
Size控制大小
Color控制颜色
todo组件(容器组件)
state
list数据
addItem removeItem updateItem
list组件
props:title
item是props的插槽
item组件
props.item={title,done,status}.deleteltem
.updateltem
header组件
props.updateltem
react生命周期
挂载
1.constructor构造函数
2.static getDerivedStateFromProps(nextProps,prevState) ; props更新触发state更新(要求返回一个新的state); nextProps最新的props,preState更新前的state
3.render渲染
4.componentDidMount组件己经更新( props,state,dom,ref都已经完成更新) 作用;注册监听事件,定期器,dom操作,ajax请求
更新
1. static getDerivedStateFromProps ( nextProps,preState) props更新触发state更新〔要求返回一个新的state) nextProps最新的props.preState更新前的state
2. shouldComponentUpdate组件是否需要更新; 返回true更新,返回false停止更新常用与组件的优化
3. render渲染
4. getsnapShotBeforeupdate;更新前获取快照返回的值是cdu的第三个参数
5. componentDidUpdate(prevProps, prevState,snapshot)组件己经更新snapshot是gssb传递的参数
卸载
componentwillunmount
组件将要卸载;
作用:移除dom事件,定期
react组件在从创建到销毁会经历一系列过程,在这些过程执行回调函数,称为生命周期钩子函数
函数组件
只有props
react17更新一个hooks让函数组件拥有类似state与生命周期
类组件
有this
有生命周期
有props
有state
有ref
Hooks
useState模拟状态
const [num, setNum] = useState(5)
模拟num数据默认是5;模拟更新num的方法setNum
useEffect使用副作用
1.模拟生命周期componentDidMount
useEffect(() => {
//模拟生命周期的componentDidMount
console.log("回调函数模拟cdm");
}, [])
2.模拟生命周期的componentDidUpdate
useEffect(() => {
console.log("回调函数模拟num的更新");
}, [num])
3.模拟生命周期componentWillUnmount
useEffect(()=>{
return ()=>{console.log("模拟生命周期componetWillUnmount")}
},[])
4.任意数据的更新,挂载,卸载都会触发
useEffect(()=>{
console.log("任意数据更新,挂载,卸载都会触发")
})