React，Hooks

特点

组件化思维
单向数据流
虚拟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("任意数据更新，挂载，卸载都会触发")
  ​})