内容简介:react hook发布也已经有几个月了,相信有部分人已经开始使用了,还有些人在犹豫要不要用,可能更多人安于现状,没有要用的打算,甚至还有很多公司的react版本是15或以下的,迫于升级的难度没有使用。以我个人的观点,要不要使用react hook呢?这只是我个人的建议,我现在用的周期也不长,我们的项目是react 16的,并且团队里只有我自己在写ract hook。幸好react hook和生命周期编程方式是完全兼容的。那么其实react hook的特点和优点其实也显露出来了。
react hook发布也已经有几个月了,相信有部分人已经开始使用了,还有些人在犹豫要不要用,可能更多人安于现状,没有要用的打算,甚至还有很多公司的react版本是15或以下的,迫于升级的难度没有使用。以我个人的观点,要不要使用react hook呢?
建议用的的人
- 项目react版本已经是react16了
- 新建的项目
- 一直对新技术保持关注,跃跃欲试的人
- 对函数式编程爱好的人
- 对react的componentDidMount,componentWillReceiverProps,componentDidUpdate厌烦,甚至因为重新渲染整天在头疼的人
不建议用的人
- 对react hook极其厌恶,对react生命周期编程是非爱好的人。
- 只要你想,没有不建议用的人,包括第一类人。
这只是我个人的建议,我现在用的周期也不长,我们的项目是react 16的,并且团队里只有我自己在写ract hook。幸好react hook和生命周期编程方式是完全兼容的。
那么其实react hook的特点和优点其实也显露出来了。
1. 没有了显性的生命周期,所有渲染后的执行方法都在useEffect里面统一管理 2. 函数式编程,你不需要定义constructor,render,定义class 3. 某一个组件,方法需不需要渲染,重新执行完全取决于你,而且十分方便管理 4. 肯定还有我没发掘的优点
针对以上的特点优点我逐一说明,对于特别基础的用法我就不大篇长论了,建议参考官网的说明文档:
react官网1. 没有了显性的生命周期,所有渲染后的执行方法都在useEffect里面统一管理
上代码(伪):
function getData(id) { const [data, setData] = useState({}); useEffect(() => { const data = api.getData(id); setData(data); }, [id]); return <div>{data.name}</div> }
这是根据id获取数据显示name的组件。
因为这个id是外部传入的,在以前你需要再didMount,willReceiverProps里面去判断是否传入的和当前的不一样,然后去获取数据,但是这里就不用了。直接集成在useEffect里面。最关键的是第二个参数[id]。这个参数的意思是id变了才进入里面的方法执行,方然第一次必执行。当然我说的不全面,大致是这个意思,还有更复杂的场景,反正这种方式类似于监听id,id变了就执行,这不就是我们的最终目的吗?react以前分那么多周期其实就是处理这一件事情
2. 函数式编程,你不需要定义constructor,render,定义class
这个就不用多说了吧
function heihei() { const [count, setCount] = useState(0); return ( <div> {count} <button onClick={() => setCount(count + 1)}>增加count</button> </div> ) }
no生命周期,no class,一切都是函数式编程
3. 某一个组件,方法需不需要渲染,重新执行完全取决于你,而且十分方便管理
这里主要讲两个方法,useMemo和useCallback
先看useCallback
之前如果我们在render中定义了一个方法:
render() { const {data} = this.state; const filter = data.filter(e => e.id !== 5); ... }
那么我们知道每次render都会执行filter这个方法,其实你是不是觉得当data没变这个方法只要执行一次就好了,看看react hook怎么做的
function demo() { ... const filter = useCallback(() => { data.filter(e => e.id !== 5) }, [data]) ... }
看懂了吗?这个完全就是我之前提出来的思路啊,它把这个方法执行的结果缓存起来了!!!后面的[data]就是当data不变,也不会多执行。
同样的道理,对于一个组件,用useMemo就好啦
const mainInfoMemo = useMemo(() => { return MAIN_INFO.map(e => ( <div key={e.key}><b>{e.label}</b>: {curSubject[e.key]} </div> )); }, [curSubject]);
当curSubject不变,当你用这个组件的时候一直不会再次渲染。
4. 肯定还有我没发掘的优点
纸上得来终觉浅,绝知此事要躬行
用了才能发掘更多东西,理解下前端的发展方向,改变以前react的编程习惯
记得收藏哦^^
以上所述就是小编给大家介绍的《react hook超实用的用法和技巧分析》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Design DeMYSTiFieD
Willard, Wendy / 2010-11 / $ 24.86
Website Design just got a whole lot easier! This title helps you to learn the latest website development tools, techniques, and best practices. "Web Design Demystified" provides the hands-on help you ......一起来看看 《Web Design DeMYSTiFieD》 这本书的介绍吧!