Skip to main content

8. 周刊第三期;关于掌控感

· 8 min read

💡想法

一个挺常见的思考场景:如何面临不确定的世界。

第一步是理清: 有意识的去做分类

先简单划分为两类

  1. 可控部分
  2. 不可控部分

这个划分并不严谨,大多数事情不是简单的是或不是就可区分,但这并不妨碍作为思考如何面对两种特点事物的思考起点

有效的分类是行动的基础

第二部是调整对应的心态

  • 可控部分

    • 主动把握,尽可能的降低非预期产生的风险
  • 不可控部分

    • 寻找方案分散风险
    • 忽略,降低心智负担
    • 思考
    • 身体

通过沉淀、多思考能够增加对思考的掌控感 通过有计划的运动、健身增加对身体的掌控感

至于外部世界,尽可能的接近现实、把握规律,现实的规律是不为人的意志所转移的,要去寻找和接近。

切新分支推远程、自动绑定

https://stackoverflow.com/questions/29422101/automatically-track-remote-branch-with-git

张三:刑不可知 则威不可测

刑不可知 则威不可测

各流派 React 状态管理对比和原理实现

各流派 React 状态管理对比和原理实现

记一次依赖安装冲突

记一次依赖安装冲突

一个统计差异的网站 What is the difference

The differences between and in the front-end development.

一个重要的 CSS 概念 Containing Block

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

Async in MobX

https://www.youtube.com/watch?v=r2rIen5pEbQ 一个解决 模版 action 的 bable 插件 https://github.com/mobxjs/babel-plugin-mobx-deep-action

开发命令行的新思路

https://github.com/webfansplz/temir

From 表单的设计演进思路

https://cloud.tencent.com/developer/article/1583853

https://zhuanlan.zhihu.com/p/56280821

解决数据的获取,校验

要想实现表单数据获取、校验,基本离不开 onChange 这个方法,而且是有几个表单控件,就要写几个 onChange 。

基于所有表单控件都需要绑定 onChange 做数据获取和校验的原则,所以我设计了一个 Field 工具。这个工具原理很简单,就是可以自动帮你绑定 value + onChange 解决上面一长串代码的问题。

const field = new Field(this);

field.init('username');

field.init 会自动返回 value + onChange ,内容如下:

{
value: "",
onChange: ƒ ()
}
<input {...init('username', {
props: {onChange:(value) => console.log(value)}
})} />

Field 可以解决校验、获取、赋值等数据方面的问题,但是并不能解决 UI 和 交互的问题,在布局和错误展示的时候需要自己来控制。

解决数据和UI的交互(展示、报错、反馈

这也是 Antd 在 rc-form 上做的事情

进一步优化开发使用体验

  1. 不需要关注 Field 用法,改成 Form API 的方式。用法简单直接不少
  2. 通过 name 来进行数据初始化,也更加接近原生 form 的用法,大家更容易理解。
  3. 校验功能 API 化,代码更加简洁,可读性增强
  4. 自定义事件比如 onChange 可以按照原生用法写而不会担心被覆盖,用起来更方便

Pasted image 20220820203551.png

flow this问题

Flow this 类型提示 https://github.com/mobxjs/mobx/issues/1769#issuecomment-452703686

无界微前端

无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。

一个和前端的设计模式教学网站

Improve how you architect webapps Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

除此之外 resource 里还有 react

CSS 的省略号问题

[https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/](Truncate String with Ellipsis) Pasted image 20220817163915.png

Why React Re-Renders

https://www.joshwcomeau.com/react/why-react-re-renders/#what-about-context

总结一下,什么时候会发生 re-render

  1. 组件持有的状态改变
  2. 某个组件 render 导致的后代都变化

为啥没有默认 memo 的行为?

When a component re-renders, it tries to re-render all descendants, regardless of whether they're being passed a particular state variable through props or not.

  1. 有些Props 它不好比,比如 ref
  2. 因为副作用会导致不确定性,全量是最保险的

如何看源码

  1. 先熟悉怎么用
  2. 测试用例
  3. 从某个场景作为切入点去梳理逻辑 / 现有相关文章

保存网页的插件

https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle?hl=en

lodash.get

https://www.lodashjs.com/docs/lodash.get 看看实现 https://segmentfault.com/a/1190000021799343

Men Are from Mars, Women Are from Venus

听文章 Wiki 上的 批评

Women and Men in a New Millennium", Kimmel contends that the perceived differences between men and women are ultimately a social construction, and that socially and politically, men and women want the same things.

Object.js

Object.is

This is not the same as being equal according to the == operator. The == operator applies various coercions to both sides (if they are not the same Type) before testing for equality (resulting in such behavior as "" == false being true), but Object.is doesn't coerce either value.

This is also not the same as being equal according to the === operator. The only difference between Object.is() and === is in their treatment of signed zeroes and NaNs. For example, the === operator (and the == operator) treats the number values -0 and +0 as equal. Also, the === operator treats Number.NaN and NaN as not equal.

React Context

  1. context re render optimize

  2. react 组合 props 可以传 react node 来实现 slot 的效果

  3. defaultValue

const MyContext = React.createContext(defaultValue);

Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This default value can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.

const AuthContext = React.createContext({
user: { username: 'jakiechan', tagline: '', bio: '' },
})
AuthContext.displayName = 'AuthContext'

const AuthProvider = ({ user, ...props }) => {
return <AuthContext.Provider value={user} {...props} />
}

function useAuth() {
const context = React.useContext(AuthContext)
// 当使用上层没有 Provider, 拿的是 default Value
return context
}

function Context() {
return (
<div>Context
<Child />
</div>
)
}

function Child() {
const { user } = useAuth()
return <div>Child</div>
}

export default Context