原文：https://www.merrickchristense...“策略与机制分离，界面与引擎分离。”—EricS.RaymondHeadlessui组件是一种新的ui组件开发模型，组件本身不提供ui上的实现，方便用户自由定制ui风格。“等一下，没有ui的ui组件，你知道你在说什么吗？”是的，与直觉相反，但这正是我们所提倡的。CoinFlip组件假设你要实现抛硬币的功能。需求如下：实现类似抛硬币的效果。翻转结束后，硬币出现正面和反面的概率为50/50。你跟产品说这个需求有点复杂，给我半年时间研究，然后你开始写democonstCoinFlip=()=>Math.random()<0.5？
头
:
尾巴
;```太简单了，然后你开个会，拿着ppt上去。产品好，功能有了，可以优化款式。对你来说没问题。constCoinFlip=()=>数学。随机（）<0.5？(
):(
);很快，他们希望在营销页面上启动您的功能。他们将把它放在博客文章中，并希望您的组件对SEO友好。所以你卷起袖子继续做下去。constCoinFlip=(//将默认值设置为false以避免破坏以前的应用程序。//当前使用情况。{showLabels=false})=>Math.random()<0.5?(
{/*添加标签，在营销页面上使用*/}{showLabels&&
Heads}
):(
{/*添加标签标签，用于营销页面*/}{showLabels&&
Tails}
);然后还有一个需求，添加一个重新启动的按钮，这个按钮只在应用中添加。组件开始变得难看，毕竟我们不是动物认真对待我。<>{this.state.showButton&&(
Reflip)}{this.state.flipResults<0.5?():()});}}然后有一天你的同事找到你：“我的朋友，你的抛硬币功能太棒了。我们有一个叫做掷骰子的新需求，你能重用你的代码吗？“你拆分了新的需求：1.需要一个重置按钮1.需要在应用程序和营销页面中使用1.与你的组件有完全不同的用户界面1.有不同的随机概率现在你面临两个选择，要么拒绝你的同事，要么改造你的组件，把掷骰子的功能放到抛硬币组件中，看着这个组件变得臃肿难维护。当一个组件的行为足够复杂，逻辑和视觉呈现可以解耦时，这种模式非常有效CoinFlip组件实现Headless的方式可以是让具体的ui实现是一个子组件或者renderProp传递输入，像这样：constflip=()=>({flipResults:Math.random(),});classCoinFlipextendsReact.Component{state=flip();handleClick=()=>{this.setState(flip);};render(){返回this.props.children({rerun:this.handleClick,isHeads:this.state.flipResults<0.5,});}}上面的组件是一个headlessui组件，因为这个组件不渲染任何东西。它完成逻辑状态提升并期望消费者进行实际的渲染工作。回到我们的应用程序，代码可能如下所示：imgsrc="/heads.svg"alt="头"/>):(
)})}然后是我们的营销页面，它可能如下所示：
{({isHeads})=>(<>{isHeads?():()})}完美，我们把逻辑和状态抽象的很好，把ui剥离了，可以随意定制我们的ui。我知道你可能在想什么...>你是不是傻了，不就是个renderProp吗，有必要绕一圈吗？在这个例子中，恰好我们使用renderProp来实现。在react中，当然我们也可以使用HOC来实现。稍加思考，我们甚至可以将其实现为MVC中的View和Controller，或者MVVM中的ViewModel和View。（注意：封装了组件内部的逻辑状态，具体的渲染和事件绑定交给渲染框架，适配层单独开发，组件甚至可以跨平台。）这里的核心思想是分离组件的机制和性能。#回到掷骰子组件这种分离的好处是我们可以轻松扩展我们的无头组件以支持我们同事的掷骰子功能：construn=()=>({random:Math.random(),});classProbabilityextendsReact.Component{state=run();handleClick=()=>{this.setState(run);};render(){returnthis.props.children({rerun:this.handleClick,//set不同的阈值，不同的概率结果：this.state.random
({({rerun,result})=>children({isHeads:result,rerun,})});同样，同事也可以通过复用Probability组件来实现自己的逻辑constRollDice=({children})=>(//六面骰子{({rerun,result})=>({/*一些自定义事件可以在这里实现*/}
掷骰子！{/*完全不同的ui实现*/}{result?(大赢家！
):(你赢了一些，你输了大部分。
)}
