用于构建用户界面javascript库 all in js
1.特点
1.虚拟dom：浏览器端javascript实现dom Api 底层dom diff算法更新有差异部分，提高渲染效率
2.组件 完成某个特定、独立，可重用功能代码
3.声明式 数据确定，页面确定
2.安装
create-react-app/react-scripts eject显示webpack配置文件
3.JSX
javascript + xml 可扩展标记语言 ｛｝当js解析，接受三目运算 <>当html解析，内联样式对象/字符串用{{}}包裹
样式对象，样式名驼峰
4.组件引用
首字母大写
return(
<>
)
函数组件不能用ref，通过ref操作真实dom，函数组件无状态组件/无生命周期，不会实例化 效率比类组件高
key 提高渲染性能，唯一标志，识别哪些做了改变，不推荐index 数组操作
5.组件传值
组件内props接受外部传入数据，props只读 react数据流单向，组件复用
函数组件 User(props){我是user组件} User.defaultProps={name:'dongjunhao'}
类组件 class User extends React.Component{ render(){ const = this.props;
return (<><>)
}
}
this.setState(state=>({ count: ++state.count }))
基于函数确保state最新
子传父
父组件<Father getChildData= />
this.props.getChildData(this.state.count)
6.类组件this绑定
1.constructor 中this.handleAdd = this.handleAdd.bind(this); 推荐
2.箭头函数 定义handleAdd = ()=>{} 推荐
3.在jsx触发元素中绑定 this.handleAdd.bind(this) 会造成额外渲染 不推荐
4.在jsx通过触发元素 {()=>this.handleAdd()} 不推荐
不推荐原因可能造成重新渲染
7.state
setState 异步更新，不会立马更新组件，批量延迟更新，放到更新队列，再合并，最后触发render 导致ui界面改变（onClick onChange 生命周期钩子函数）
使用场景：
1.随时间产生变化的，有交互的使用state
2.数据展示/没有复杂交互/纯函数/ 使用函数function组件，不适用state
8.state props区别
1.都是组件内的数据，保存信息，控制组件
2.props 父组件传入 定义外部接口 this.props props 只读 不能直接修改
3.state 组件内部的状态 当前组件 私有变量，需要更新ui，显示/隐藏
9.生命周期 创建到销毁的过程
1.挂载阶段
constructor(props){ super(props) } 初始化操作 state this绑定
componentWillMount 组件即将挂载，还没渲染之前，只会调用一次，setState不会重新渲染 很少使用 服务端 客户端调用两次数据
render() 返回UI描述，不参与实际渲染工作，必须是纯函数，不能改变state，调用React.createElement 将jsx转换成vdom
componentDidMount 只调用一次，获取到真实dom，向服务端发去数据请求，保证任何情况下获取到数据时，组件已经处于挂载状态，不会发送多余数据请求
作用：数据请求，数据修改，操作真实dom，第三方库实例化
2.更新阶段
shouldComponentUpdate 通知react组件是否更新，有权利阻止更新,减少组件不必要渲染，提高性能
if(nextProps.props.属性名 !== this.props.属性名 || nextState.state.属性名 ！== this.state.属性名){
return true;
}else{
return false;
}
componentDidUpdate 判断是否发送网络请求
3.卸载阶段
componentWillMount 清理定时器，取消网络请求，移除监听
4.错误处理阶段
componentDidCatch(error,info)
10.受控 非受控组件
表单元素 value结合onChange handleChange = (e)=> 值放在state，通过state管理表单里的值是受控，必须使用onChange获取值改变 this.handleChange =(e)=>；每当表单状态发生变化，写入state,统一管理不需要获取dom
非受控 间接通过ref获取dom ref={} const inputRef= React.createRef(). inputRef.current.value,通过defaultValue设置默认值，不能设置value，设置value需要结合onChange使用
容易和
11.事件 监听this
onChange onClick onBlur on+EventType 原生标签元素，不能写在自定组件
事件传参
1.bind this.handleClick.bind(this,'传递参数123') handleClick(params,event)
2.箭头函数 （event）=>{handleClick(event,'传递参数456')) handleClick(event,parmas)=>{}
评论区