记得在刚学react时候,就注意到了函数式组件和类式组件的区别。函数式的组件运行速度是明显优于类式组件的没有那些复杂的生命周期啥的东西。但是如果我们想在指定的阶段去做一些事情,函数式组件又不能做到。所以两者通常是结合使用的。一些需要状态处理的用类式组件,不用状态处理的用函数式组件。也有一种优化方案是将类式组件里的状态提取到redux进行集中化管理。
在react出了react hooks之后这个状况可能有些改变了。哎,有些迷茫,单看js的发展其实就是从函数式编程过渡到类式编程的过程。为此出来了class 等一系列配套的东西。而现在react又要转变观念使用hooks进行函数式编程。没办法学吧,前端学的没够。。。
还好现在用到的是useState useEffect 这两个东西还是容易解决的。首先useState里面可以定义一些 'state'。具体用法可以参考以下代码
const [State, setState] = useState({
content: "",
currentPage: 1,
deleteId: ""
});
useState 里面还可以定义一些变量
const [date, setDate] = useState(new Date().toLocaleString());
上述两个useState互不影响。
另一个是useEffect 实质上这个东西如果未填入第二个参数的话,会在多个生命周期里面执行包括componentDidMount componentDidUpdate componentWillUnmount 。如果useEffect(()=>{},[])第二个参数传入空数组的话就只会在挂载阶段执行一次。另外有个需要补充的是如何解决比如说内存泄漏的问题。假如我在挂载阶段设置了定时器,清除它的话可以在useEffect 第一个函数参数里面 return 后面执行()=>{ 清除定时器}