react function 组件 和 hook 都可以导出组件, 页面子组件使用 hook还是function ?

Question

function useHook(value){
    const component = useMemo(()=><Text>value+'123123'</Text>,[value]) 
    return component
}

或者

function TheText({value}){
    return <Text>value+'123123'</Text>
}
export defualt memo(TheText)

Answer 1

从语义的角度，导出组件使用function函数组件更好。
自定义hooks一般用来组织可以复用的逻辑（状态与方法）。

Answer 2

取决于是否需要对子组件进行优化，通常简单的子组件内容例如纯文本就没有必要在使用 hooks 去优化，此时直接导出函数式即可，如果子组件内容复杂并且需要减少函数式组件的重复渲染可以使用 hooks 优化。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。