很多人都疑惑为什么面试官很喜欢问小数精度误差这一道题。我想应该是由于小数误差在业务开发中是很常见的一种问题
问这道题的意义，就是在看你是的开发经验是不是虚构的，有三年开发经验肯定会遇到这种问题
🤖 简单原理
原理很简单，没有什么虚头巴脑的
数字在计算的时候需要十进制转化成二进制，但是有一些小数二进制是无限不循环数
计算机最多只能保存 52 位关于小数的部分
所以在计算过程中，大于 52 位的必须砍掉，误差的产生就在这里
🤖 具体场景
刚好我开发的组件库里面的评分组件就需要用到小数的运算🥰
在 js 中，对数字进行加减乘除的时候，我们务必要使用库。
不然当我们依赖这些数字进行条件判断的时候，就有可能出现问题
那我是怎么解决小数精度误差的呢？在工作中当然是使用已有的成熟库了，笔者用到了一个 decimal.js 的库
decimal.js 一些简单的用法
const value = new Decimal(x).dividedBy(iconRect.width).toFixed(1);
new Decimal(updateValuePrecision(hoverValue)).minus(new Decimal(hoverValue).floor()).toNumber()
const fullIndex = new Decimal(hoverValue).minus(1).floor().toNumber();
🤖 小贴士：既然提到了评分组件，您想知道怎么实现一个最简单的评分组件吗？😤
🚀 功能需求
代码开发先有架构先有功能需求，才有代码实现。别起来一股脑对着代码死干
- 有一个受控属性
value，如果有值，点击评分组件什么都不会变，只会把最新的值通过onChange给到你 - 默认用
emptyIcon渲染出5个未激活的小星星 - 点击之后激活的小星星用
icon渲染
function Demo() {
const [value, setValue] = useState(1.5)
return <Rate
value={value}
onChange={setValue}
count={5}
icon={<Star color="#0858d9" />}
emptyIcon={<Star />}
/>
}
🚀 简单实现
function Rate(props) {
const { count } = props;
const [value, setValue] = useControllableValue(props)
const onClick = e => {
// 点击评分组件的时候
// 重新 setValue
}
return <div onClick={onClick}>
[...Array(count)].map((_, key) => {
return <div key={key}>'图标'</div>
})
</div>
}
原理很简单，用到了 ahooks 里面的 useControllableValue 实现受控属性
useControllableValue会读取<Rate />组件的props，看看props上有没有value字段- 如果没有
value字段，你去执行setValue(val)，useControllableValue内部就会通过setState(val)去修改value，那么用到useControllableValue这个组件就会重渲染。
并且还会把最新值给到props上的onChange函数执行 - 如果有
value字段，你去执行setValue(val)，他只会把值val给到props上的onChange函数而已，就不会setState了，所以什么也没发生
useControllableValue默认读取props.value和props.onChange，当然可以自定义，去看ahooks文档
如果想了解代码实现细节的，可以去看我的
github顺便帮我点一颗小星星可以吗？各位程序员里面的小帅哥小美女
🤖 相关
面试官：听说你简历里写的精通 React 源码，那你给我讲讲 React Scheduler 呗？我：😡 工资加 2K
面试官：你说你做过组件库，肯定了解过复杂组件状态管理的useSyncExternalStore吧？我：😭
版权归许泽川所有
如需转载，请提前询问本人的许可
