关于render渲染次数

关于render渲染次数

页面加载render执行几了次（五）

1. 单纯的前端渲染

   render在componentWillMount后会执行一次，会在props及state改变时执行。

2. 服务端渲染（例如node）我觉得render有三种情况

   服务端要使用renderToString或renderToStaticMarkup将DOM转化成浏览器可识别的模板进行渲染

   import { renderToString, renderToStaticMarkup} from 'react-dom/server'
   

   可以理解为这就是服务端的render，可以看到其就是react-dom下server里的东西。

   renderToString(
   <Provider store={store}>
        <RouterContext {...renderProps}/>
   </Provider>
   )
   

   而这两种render有什么区别呢

   renderToStaticMarkup 渲染的就是单纯的HTML

   renderToString 渲染的HTML会有data-reactid等属性

   这(data-reactid等属性)是个独特的属性，在reactJS加载完成之后，会识别是否进行前端渲染吗？

   答案是不会，会把服务端渲染的render当做前端渲染的render继而执行componentDidMount。

   而renderToStaticMarkup就会执行前端的render覆盖，服务端的渲染，在react加载后，造成页面再次刷新。

render渲染场景

• 初始化：React在应用初始化的时候，会渲染全部组件
• setState()在任何情况下都会导致组件的重新渲染，即使state未发生变化
• 只要父组件重新渲染了，那么子组件就会重新渲染：即使组件未发生变化，并且从父组件接收的props也没有发生变化，但是只要父组件重新渲染了，那么子组件就会重渲染。
• 服务端渲染

参考链接

页面加载render执行几了次

组件的生命周期

重渲染优化