react16的新特性实例介绍
程序员文章站
2023-09-29 09:46:05
react 16 的好处：
1：新的核心算法 fiber
react 新的算法，更加友好；
2：render可以return数组 ，字符串
可以return数组 不需要包p...
react 16 的好处：
1：新的核心算法 fiber
react 新的算法，更加友好；
2：render可以return数组 ，字符串
可以return数组 不需要包p； 但是必须有对应的key；
3:错误处理机制
增加了抛异常的生命周期函数
componentdidcatch(err,info){
this.setstate({iserror:1});
}
这样页面报错 我们就可以委婉的换个方式展示了～～！！1
4:portals
弹窗组件； 是body的儿子节点，不是嵌套在组件内的组件；
5:更好更快的服务端渲染
服务端使用流的方式使得 提升了服务端的渲染 速度增*倍 ；
从rendertostring()到rendertonodestream()；
要该改写页面；
//首先 的话 先把第一节 代码书写带前端
res.write(`<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href=${assetmanifest["main.css"]}>
<title>51job</title>
</head>
<body>
<p id="root">`);
const markupstream=reactdomserver.rendertonodestream((
<provider store={store}>
<staticrouter
context={context}
location={req.url}
>
<app/>
</staticrouter>
</provider>
)
);
//第二步，把markupstream 推到res上 ，并且声明没有结束；
markupstream.pipe(res,{end:false});
//第三步；监听markupstream 结束事件 ；
markupstream.on("end",()=>{
res.write(`</p>
</body>
<script src=${assetmanifest["main.js"]}></script>
</html>`);
//最后结束渲染；
res.end()
})
并且 前端展示的react-dom的render方法就不能用了需要 改写为：hydrate；
首先说一下为什么使用hydrate而不是render，这个是react 16版本中的一个变更，hydrate主要是用于给服务端渲染出的html结构进行“注水”，由于新版本中ssr出的dom节点不再带有data-react，为了能尽可能复用ssr的html内容，所以需要使用新的hydrate方法进行事件绑定等客户端独有的操作。
6:体积更小；mit协议；
减少体积30%； mit完全开源；
上一篇： 深入理解jquery中extend的实现
下一篇： 关于新增tomcat需要改动的建议