react

REACT

react 是一个针对视图层的库，使用的是 jsx 语法
jsx 语法是一种在 js 中写 html 代码的语法，需要使用 babel 插件做解析
https://reactjs.org/ 官网
https://www.runoob.com/react/react-tutorial.html 菜鸟教程

class 定义的组件和 function 定义组件的区别

（1）在 16.8 之前的 react 中 funciton 定义的组件不能拥有局部状态和生命周期，是一种无状态组件
（2）16.8 之后的 react 中新增了 hooks 可以在 function 定义的组件中模拟局部状态和生命周期
（3）function 定义的组件没有 this 执行问题，代码可读性更强
（4）class 定义的组件写法上更接近于强类型语言的语法
（5）class 定义的组件中有很多的生命周期钩子函数，
（6）function 定义的组件通过 useEffect 副作用来模拟处理生命周期

把一个数组循环展示

1
2
3
4
5

{list.map((item,index)=>{
return (
<p className=””  key={index}>{item}</p>
)
})}

function 定义的组件中

需要写 const [list , setList] = React.useState([{id: 1, content: “起床”}])
然后在方法中写 setList（） 写了之后当 state 数据发生改变之后组件会重新渲染

组件传参

（1）父传子 使用 props
（2）子传父使用 方法调用
useEffect 副作用
就是我们做了什么操作之后会引起一些其他的反应
参数一 是一个回调函数
参数二 表示哪些数据的改变会引起前面回调函数的处理，数组中的任何一项发生改变都会引起回调函数执行
如果第二个参数是空数组    那么只有在组件初始化的时候执行一次

class 定义组件时的 this 指向

1
2
3
4
5
6
7
8

（1） this.clickHandle = this.clickHandle.bind(this);//改变 this 指向
这种绑定 this 指向的方法是官方推荐写法
组件初始化的时候只会做一次绑定
（2）return <button onClick={this.clickHandle.bind(this)}>{this.state.count}</button>
直接在render的时候执行this绑定
		每一次数据或者属性改变之后this指向绑定的操作都会执行
（3）箭头函数
<button onClick={() => this.clickHandle()}>{this.state.count}</button>

通过 extends 继承在 Component 实现一个组件

每一个组件都需要有一个 render
此方法返回的是当前组件显示的内容