最近开始学习React,记录一下心得。
React hooks是16.8.0推出的,其目的是为了替换class,HOC,render props。那么本文将讨论啥是hooks,HOC,render props,以及hooks究竟能不能替换掉HOC,render props。
Hooks替代HOC和render props。
首先是hooks(这里指custom hooks,下同),HOC,render props到底是做什么的?
对于新手,并不是很容易理解它们是做什么的,至少我没有很容易理解。
我现在理解为它们是为了共享一些维护state的逻辑。
什么意思呢?首先它共享的是逻辑,但是共享逻辑你随便封装一个函数不就可以了么?问题就出在它是共享维护state的逻辑。普通的逻辑的和维护state的逻辑的区别就是,维护一个state的逻辑,当state发生变化时,用到这个state的组件是要重新渲染的,显然用普通的函数做不了这个事情。
那么有哪些维护state的逻辑呢?我大体上把它们分为两类:
第一类,一个状态组件维护state的逻辑,第二类,一个非组件维护state的逻辑。
其实一个状态组件本身就是在维护一个state,当用户操作它所渲染的UI的时候,state发生响应的变化。组件的逻辑负责维护state的变化。
那么非组件指什么呢?
比如说我维护一个user的登录状态,这个登录状态需要发送请求给后台去拿。那么这个登录状态就会有3个值{fetching,online,offline},而且可能会从fetching到online,或者从fetching到offline,就是会变化的。
比如说我需要记录用户鼠标的位置(x,y坐标),这个是随用户移动鼠标而变化的。
比如说我做一个定时器,每隔一段时间切换一下我维护的一个state。
等等,我相信还有其他很多。
之所以分为这两类,是因为我们不能用hooks来共享状态组件。这是因为我们用hooks的时候是需要用它的返回值的,这个返回值通常是这个hooks所维护的state或者state的计算值,那么这个hooks就不可能返回一个dom元素了,也就是hooks不能包含组件。
然后我们建立一个简单的模型分析下三者的结构。
我们假设有三个组件A,B,C需要共享一个维护state的逻辑S。那么:
hooks是什么呢?hooks就是把S封装成useS,也就是一个custom hooks,然后在A,B,或者C里面使用useS
const useS = () => {
const [state, setState] = useState('someValue')
useEffect(() => {
...some code...
setState('anotherValue')
})
return state;
}
const A = () => {
const s = useS();
return (
<div>
<div>{s}</div>
<div>A</div>
</div>
)
}
Render props是什么呢?它是把S封装成一个component,同时这个component留了一个props用来接收需要渲染的组件。我认为下面这两种写法都是render props,因为他们的结构基本一样,结果完全一样。
第一种,就是官方文档的写法:
const S = ({render}) => {
const [state, setState] = useState('someValue')
useEffect(() => {
...some code...
setState('anotherValue')
})
return render(state)
}
const A = ({s}) => {
return (
<div>
<div>{s}</div>
<div>A</div>
</div>
)
}
const App = () => {
return <S render = {(s) => <A s={s} />} />
}
第二种,也是可用的写法。
const S = ({render}) => {
const [state, setState] = useState('someValue')
useEffect(() => {
...some code...
setState('anotherValue')
})
const Render = render;
return <Render s={state} />
}
const A = ({s}) => {
return (
<div>
<div>{s}</div>
<div>A</div>
</div>
)
}
const App = () => {
return <S render = {A} />
}
可以看到render props相对于hooks有明显的区别,它在被调用的时候需要知道两个component。Render props的两种写法的区别就是第一种是调用的时候render设置为一个函数,返回值为component实例。第二种是render设置为component本身。
HOC是什么呢?HOC就是把S封装成一个函数withS,这个函数返回一个新的component。
const withS =(WrappedComponent) => {
return () => {
const [state, setState] = useState('someValue')
useEffect(() => {
...some code...
setState('anotherValue')
})
return <WrappedComponent s={state} />
}
}
const A = ({s}) => {
return (
<div>
<div>{s}</div>
<div>A</div>
</div>
)
}
const AWithS = withS(A);
const App = () => { return <AWithS />; }
对比一下HOC和render props,你会发现其实HOC返回的component使用的技术和render props很相似哦!只不过render props的例子中需要render的component来自props,而HOC中需要render的component来自HOC的参数。
当然在react的官方文档中你会发现另一种写法,HOC的返回值调用了用render props技术实现的S。这种写法往往是为了提供API给其他开发者,让喜欢用HOC的去使用HOC,喜欢用render props的去使用render props。
const S = ({render}) => {
const [state, setState] = useState('someValue')
useEffect(() => {
...some code...
setState('anotherValue')
})
const Render = render;
return <Render s={state} />
}
const withS = (WrappedComponent) => {
return () => { return <S render = {(s) => <WrappedComponent s={s} />} /> }
}
const A = ({s}) => {
return (
<div>
<div>{s}</div>
<div>A</div>
</div>
)
}
const AWithS = withS(A);
const App = () => {
return <AWithS />;
}
const AnotherApp = () => {
return <S render = {(s) => <A s={s} />} />
}
HOC和hooks一样,在调用的时候只需要知道一个component,上面例子中的AwithS,实际情况是我们命名AwithS为A,而真正的A不被暴露(export)出去,这是很好的行为。
HOC不光是有共享维护state的逻辑的能力,还可以做一切封装能做的事情,比如说偷偷改下上层component传过来的props的值。
Hooks能替代HOC,render props么?
hooks是无法实现共享状态组件逻辑的,当然就无法在这方面代替HOC和render props。而共享非组件逻辑的功能,基本都可以用hooks来替代,而且最好用hooks来实现,因为我们看到了,hooks的逻辑最直接,最容易理解。当然第一原则仍然是根据业务实事求是,就是概念上该是什么就是什么,如果概念上就是HOC,那么就用HOC。实事求是是为了代码的更好维护。