react16的新特性

最新推荐文章于 2024-05-22 20:10:28 发布

fire-fire-fox

最新推荐文章于 2024-05-22 20:10:28 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/wangrong111222/article/details/81106761

版权

react 16 的好处：

1：新的核心算法 Fiber

react 新的算法，更加友好；

2：render可以return数组，字符串

可以return数组不需要包div；但是必须有对应的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>
    <div 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(`</div>
    </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完全开源；

fire-fire-fox

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react16的新特性

react 16 的好处：1：新的核心算法 Fiberreact 新的算法，更加友好；2：render可以return数组，字符串可以return数组不需要包div；但是必须有对应的key；3:错误处理机制增加了抛异常的生命周期函数 componentDidCatch(err,info){ this.setState({isError:1})...
复制链接

扫一扫