类组件和函数组件
类组件: 通过继承React.Component
得来的React组件
import React, { Component } from 'react';
class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = {
text: 'Hello React!'
}
}
componentDidMount(){
}
render() {
const {text} = this.state;
return (
<div>
<div>{ text }</div>
</div>
);
}
}
export default ClassComponent;
函数组件(无状态组件): 以函数形式存在的React组件,最开始也被叫做无状态组件
export const FunctionComponent = function(props){
const {text} = props
return (
<div>
<div>{ text }</div>
</div>
)
}
类组件和函数组件之间的对比
- 类组件需要继承
React.Component
,函数组件不需要 - 类组件可以使用组件的生命周期,函数组件不可以
- 类组件中可以使用实例化的
this
,函数组件不行 - 类组件可以定义并维护
state
,函数组件不可以
重新理解类组件和函数组件
类组件
类组件是通过继承而来的,本身就包含很多内置API可以调用,比如state
和生命周期
。所以对应的,类组件相对而言比较重,学习成本也相对高一些。并不适合所有场景都去使用。
函数组件
相对于类组件,函数组件更轻巧,灵活,易于维护。React Hooks
的出现,让函数组件可以选择性的实现类组件中拥有的功能,这就使得函数组件在轻巧的同时,更加灵活。
函数组件更符合React框架的设计理念
UI = render(data)
这是React官方给出的公示。一个函数,吃进数据,吐出UI
Hooks的本质
Hooks的本质就是一套能够使函数组件更强大,更灵活的钩子
对于函数式组件来说,Hooks就想是一个工具库,可以自由的进行选择和组装,从而定制出一个最适合的组件
useState:为函数组件引入状态
useState
函数返回一个数组,数组的第一项是要定义的state
变量,数组的第二项是可以修改该变量的API
useState
函数接收一个入参,作为state变量出初始值
import React, { useState } from 'react';
function UseStateComponent(props){
const [count,setCount] = useState(0)
return (
<div>
<h1>React Hooks useStateDemo</h1>
<div>当前Count:{ count }</div>
<button onClick={() => setCount(count + 1)}>Count++</button>
</div>
)
}
export default UseStateComponent
useEffect:为函数组件执行副作用操作
函数组件跟类组件最大的区别就在于state
和生命周期的缺失,useState
为函数组件引入了state
,而useEffect
则在一定程度上弥补了函数式组件生命周期的不足
可以使用React生命周期来理解useEffect
的作用,但是不要将两者划等号。useEffect
的作用是为函数式组件引入副作用的钩子
useEffect函数可以接收两个参数,第一个是回调函数,第二个是依赖更新的State数组
useEffect(callBack,[])
1. 每一次渲染后都执行的副作用
传入回调函,不传依赖数组
useEffect(()=>{
//处理逻辑
})
2. 仅在挂载阶段执行一次的副作用
传入回调函数(该函数的返回值不能是一个函数),且传入一个空数组
useEffect(()=>{
},[])
3. 仅在挂载阶段和卸载阶段执行的副作用
传入回调函数,且回调函数返回另一个函数(卸载的时候调用该函数),数组传空
useEffect(()=>{
return () =>{
}
},[])
4. 根据一定的条件来触发的副作用
传入回调函数,且传入依赖数组,数组不为空。数组中为监听的state属性,当数组中的属性改变的时候,就会触发副作用
useEffect(()=>{
},[num1,num2,num3])
总结
useEffect
一共接收两个参数,第一个是回调函数,第二个是依赖数组- 通过回调函数是否返回一个新函数来决定卸载时候会不会执行
- 通过控制依赖数组传,不传,传空来分别控制重新渲染的时候依赖触发,每次都触发,不触发
React Hooks的优势
1. 告别难以理解的类组件
React类组件的生命周期相对复杂,同时很多不合理的逻辑处理会被加入到生命周期里面
React类组件里面的this指向问题也是一大痛点
2. 更好的逻辑拆分
函数组件相对于类组件,可以做到更好的组件化,以及逻辑的拆分
有了React Hooks的加持,函数式组件将更加强大和灵活
3. 函数式组件更符合React的定位
UI = render(data)