当前位置： 移动技术网 > IT编程>网页制作>CSS > react16的新特性实例介绍

react16的新特性实例介绍

2019年04月30日  | 移动技术网IT编程  | 我要评论

proxyie,h工口小学生赛高呀,李兆前背景

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完全开源；

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网