react知识点总结

react的语法

1.环境的搭建：

（1）建立一个项目文件 npm init -y
（2）安装react工具 npm i react --S 进行局部安装

2.jsx 语法

属于javascript的扩展性语言，是一种语法糖。
语法的原理是创造一个节点，React.createElement(tag,{attrs},content)，它有三个内容：标签,｛属性："属性值 "｝,文本内容。

3.组件

：无状态组件和状态组件
语法：无状态组件—》const function(){
return{
内容
}
}
状态组件（类组件）:
class 组件的名字 extends React.Compent{
render(){
return 内容
}
}

4.对象转换为数组的方法：

Object.key(对象)

5.安装脚手架

脚手架环境的搭建：

1. npm i create-react-app -g 全局安装；
2. create-react-app ‘名字’；
3. 启动项目，npm run start

6.路由转换

环境的搭建：
1.npm i react-router-dom --save
2.import｛without，NaLink，Route，switch，redireact｝
NaLink–》可以写样式的路由跳转链接
Route–》路由的跳转
switch–》可以进行路由的局部跳转
redireact–》进行路由的精准查找

7.react-》生命周期的钩子函数

1.挂载阶段的四个钩子函数：

1. constructor（props，context）—》constructor (props){
   super(props)
   this.state: 存入的数据
   }
   2.getDerivedStateFromProps（props，state）
   3.render（）—》jsx语法糖的渲染
   4.componentDidMount｛
   执行动作行为，监听动态的钩子函数
   ｝

2.卸载阶段的钩子函数：

componentWillUnmount{}

3.更新阶段的钩子函数：—》解决性能优化的问题

1.shouldComponentUpdata(nextProps,nextState)
2.PureCommponent()---->进行浅比对，可以进行性能的优化，是一个纯组件
3.React.Memo(组案)
4.HOC(高阶组件)：参数是组件，返回值也是组件

-----逆战班