React

React 事件是什么？ React 事件是 React 框架对于浏览器原生事件的一层封装，称为合成事件，相当于一个事件综合处理系统。在页面上点击一个按钮时，浏览器会产生一个原生的事件，React 并不会给每一个按钮都加一个单独的监听器，而是在整个组件树的顶部（根 DOM 节点）设立一个调度中心。事件会冒泡到顶部，React 随后会创建一个合成事件对象，这个对象抹平了不同编辑器之间的差异，提供了一...

key 是什么？ 是一个特殊属性，主要针对列表，map 后的 react 组件，以及相邻的同类型 DOM，需要手动指定 key，帮助 react 做区分 为什么要有 key？ 1. React Diff 算法的需要。如果修改数组，没有指定 key 时，React 的 Diff 算法（优先通过 key 匹配），只能退化为按索引顺序对比。 2. 提升性能，比如说我在列表的开头新增了一个元素，如果不指定...

1. 在单次渲染的范围内，props和state始终保持不变，可以看成固定值，在任何地方读取都是一样的（Capture Value） 2. React只会在浏览器绘制后运行effects。这使得你的应用更流畅因为大多数effects并不会阻塞屏幕的更新。Effect的清除同样被延迟了。上一次的effect会在重新渲染后被清除。 3. useEffect 里的 return，清理的也是当前渲染的这一...

先介绍两个概念 - 状态共位：将状态尽可能放置在离其使用位置最近的组件中。从而减少不必要的渲染和 props 传递，简化组件结构，提高可维护性。适用于状态仅被单个或少数几个组件使用的场景 - 状态提升：将共享状态提升到共同的祖先组件中。实现多个组件之间状态共享，父组件通过 props 向下传递数据和回调函数。使用于状态被多个兄弟组件所需要时。 一句话总结：共置状态 -> 提升状态 -> 组件组合 ...

四点建议： 1. 一开始不要过度考虑组件的扩展性。如果在一开始就把各种情况都考虑到，会导致组件核心功能不清晰，为了实现各个 props，可能会导致代码存在很多的逻辑判断 2. 如果为了高扩展性设计，可以考虑更多使用 props.children 插槽的方式，让外界更自由的使用。而组件只关心自己的核心功能。如果是为了让用户即插即用，可能确实需要支持更多的 props。 3. 关注传入 props 的...

The error message displayed in my terminal was as follows: <tsconfigRootDir>/src\xxx.tsxparserOptions.project I tried to fix it by following the steps in the error message, but it didn't work. Then I ...

react-hook use with to reduce unnecessary child-component re-render use and wrap child components in to share data between components without passing data by props. use with to improve user expe...

Two hooks to start Mobx with React