很多人都疑惑为什么面试官很喜欢问小数精度误差这一道题。我想应该是由于小数误差在业务开发中是很常见的一种问题
问这道题的意义,就是在看你是的开发经验是不是虚构的,有三年开发经验肯定会遇到这种问题
🤖 简单原理
原理很简单,没有什么虚头巴脑的
数字在计算的时候需要十进制转化成二进制,但是有一些小数二进制是无限不循环数
计算机最多只能保存 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吧?我:😭
版权归许泽川所有
如需转载,请提前询问本人的许可