react hooks的一些使用(一)

一:简要

React Hooks是React 16.8的新增特性。可以在不编写class的情况下使用state以及其他react特性。解决了React组件共享以及组件生命周期管理混乱复杂的问题。标志了react 函数组件不会在出现无状态的情况。

二:基础Hook

在hook之前,组件只有class类组件有自己的状态(state)数据,函数组件是无状态的组件,一般用来作为UI组件使用。而Hook函数恰恰拥有这React状态和生命周期管理能力。

 1: useState()

useState函数使得函数式组件拥有保留了自己的状态方法


如上图,useState函数参数只有一个,就是initData的初始值,参数可以是一个null、Boolean类型、number类型、string类型、或者也可以是一个Object,甚至为一个function等等...

2: useEffect()

react官网介绍这个Hook“可让你在不编写类的情况下使用state(状态) 和其他 React 功能”

在了解这个Hook之前,你可以了解一下副作用(Side Effect)

官网解释:副作用是指函数或者表达式的行为依赖于外部世界

参照Wiki上的定义,副作用是指:

a:函数或者表达式修改了他的scope(能力)之外的状态

b:函数或者表达式除了返回语句外还与外部世界或者他所调用的函数有明显的交互行为

正常情况下,在React函数组件函数体中,DOM操作、数据获取(axjx)以及设置订阅模式都是属于副作用的范畴,然而官方并不建议开发者直接在函数体当中直接写这些副作用代码,在class类组件当中,副作用代码都是写在生命周期函数componentDidMount和componentDidUpdate当中,而在函数组件中,useEffect Hook的出现解决了这一问题。


React组件中有两种常见的副作用操作(side effects):不需要清理和需要清理的

结合下图


简单来说,useEffect第二个参数就是用来控制该useEffect hook的执行时机,默认不写每次页面渲染就会执行。空数组的话只在页面首次渲染执行,在离开组件时会执行销毁清除操作,具体详细可看官网


3:useContext()

context提供了一种在组件之间共享props的方式,而不必显示地通过组件树的逐层传递props,有点类似与vue中的project / inject 

使用方法如下

父组件


子组件


页面展示


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。