小庄zzz的博客

我们经常会看到这样的场景：一个组件改了 props，紧接着用 useEffect 重置 useState；或者每次函数都用 useCallback 包起来，生怕性能不够“丝滑”。其实，这些“反射式优化”不仅没有带来好处，反而拖慢了你的 UI，制造了更多不可预测的问题。React 官方文档已经为这些常见问题给出了非常清晰的替代方案——你可能不需要 useEffect！👇。

最近在做Next项目的时候使用Next.js的预渲染API时踩了一些坑，各种数据获取和传入的API看的眼花缭乱，它们具体的作用和表现对我来说是一个黑盒。因此，我认真的看了Nextjs的官方文档中渲染部分的介绍并结合自己的实践进行了总结。在Next.js中想要使用某种渲染方式，例如我想指定SSR或是SSG，并不是说直接在某个配置文件中改一个配置就可以的，而是我们在页面中使用了一些相关的API，而Next.js在打包时检测到了才会进行相应的页面构建策略。如果你对于Next.js。

通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。

react-redux 数据传输∶ view–>action–>reducer–>store–>view。view 上的AddClick 事件通过mapDispatchToProps 把数据传到action —> click:()=>dispatch(ADD)action 的ADD 传到reducer上reducer传到store上 const store = createStore(reducer);

（1）受控组件在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值每当表单的值发生变化时，调用onChange事件处理器。

即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。：父组件通过 props 向子组件传递需要的信息。：: props+回调的方式。

在老版本的 React 中，如果组件自身的某个 state 跟其 props 密切相关的话，一直都没有一种很优雅的处理方式去更新 state，而是需要在 componentWilReceiveProps 中判断前后两个 props 是否相同，如果不同再将新的 props更新到相应的 state 上去。但是，有的时候子组件的接受父组件的数据没有变动。需要注意，在进行新旧对比的时候，是**浅对比，**也就是说如果比较的数据时引用数据类型，只要数据的引用的地址没变，即使内容变了，也会被判定为true。

假如所有setState是同步的，意味着每执行一次setState时（有可能一个同步代码中，多次setState），都重新vnode diff + dom修改，这对性能来说是极为不好的。setState 并不是单纯同步/异步的，它的表现会因调用场景的不同而不同。在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发调和过程(Reconciliation)。React会将state的改变压入栈中，在合适的时机，批量更新state和视图，达到提高性能的效果。