You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import{nest}from'recompose';constA=({data, children})=>(<div>
this is some node
{children}</div>);constB=({data, children})=>(<div>
this is some node
{children}</div>);constC=({data, children})=>(<div>
this is some node
{children}</div>);exportdefaultnest(A,B,C);
需要注意的是组件传入的顺序决定嵌套层级,以及父组件需要使用{children}引用子组件
The text was updated successfully, but these errors were encountered:
Recompose 用于创建函数式组件和高阶组件的react工具库
Recompose项目地址
recompose
可以看做React技术栈的lodash
,提供了许多用于创建react函数式组件和高阶组件的工具函数,包括compose
、branch
、withState
、withStateHandlers
等基本用法
withState
使用pure和onlyUpdateForKeys实现函数式组件的shouldComponentUpdate
高级用法
compose组合
compose
方法和之前redux源码中的compose方法一模一样,因为react的高阶组件实际上是接受组件作为参数并最终返回一个组件的高阶函数
,所以对于相同的组件支持使用compose函数直接组合不同的高阶组件,类似于这样一种方式直接看recompose的源代码实现会发现很多方法比如
withState
、withProps
、withHandles
、withContext
都是直接返回一个高阶组件的,他们都长这样对于这样的高阶组件,就可以使用compose方法来进行组合,compose函数的参数个数没有限制,但必须是一个高阶组件(满足输入一个组件并返回一个新组件),使用compose函数就可以组合这些方法,包装一个纯函数组件,利用这个办法可以把组件的副作用剥离出来,使外部业务逻辑不会干扰组件自身
生命周期函数
recompose推崇函数式无状态组件,因为这样既方便书写也可以把无用的逻辑抽离出来,使用
lifecycle
函数可以为无状态组件添加生命周期函数nest组件层级嵌套
nest
函数的作用是将传入的组件按照顺序一层一层嵌套起来,形成这样的jsx结构使用nest可以将这些组件自动嵌套在一起
需要注意的是组件传入的顺序决定嵌套层级,以及父组件需要使用{children}引用子组件
The text was updated successfully, but these errors were encountered: