React16新特性

最新推荐文章于 2025-06-09 15:48:06 发布

xiashiqi_blog

最新推荐文章于 2025-06-09 15:48:06 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/xiashiqi_blog/article/details/86419852

react 专栏收录该内容

2 篇文章

订阅专栏

React16引入了多项新特性，包括允许render方法直接返回多种类型，如string和number，有助于减少DOM层级。此外，改进了服务器端渲染，新增renderToNodeStream和renderToStaticNodeStream方法，提供更优的渲染速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React16新特性

render方法新增返回类型

在React 16中，render方法支持直接返回string，number，boolean，null，array等。这可以在一定程度上减少页面的DOM层级。

// 错误写法
class WrongDemo extends React.Component {
    render() {
         return (
            <h1>Welcome to React</h1>
           <div>Hello {this.props.name}</div>
        )
    }
}

// 正确写法
class Demo extends React.Component {
    render() {
         return [
            <h1>Welcome to React</h1>,
           <div>Hello {this.props.name}</div>
        ]
    }
}

更好的服务器端渲染

15版的ssr方式：
react服务端为了支持服务端渲染，在react-dom模块中发布了server模块，其中主要api是：renderToString和renderToStaticMarkup

renderToString:将一个react组件渲染成html字符串，react@15版本中html中会输出data-reactid标识组件
renderToStaticMarkup 功能和前者类似，不带data-reactid标识，节省服务端流量
在react@15版本ssr方案中，renderToStaticMarkup因为不带data-reactid标识，实际上在客户端渲染的时候，react是没法diff组件虚拟dom;react是会重新通过客户端渲染的dom覆盖掉服务端吐出来的html,会闪一下。

16版本推出新的ssr方法：
renderToNodeStream 对标 renderToString
renderToStaticNodeStream 对标 renderToStaticMarkup ，此方法无论服务端有没有渲染，客户端都会重新渲染,在存静态页面时使用可得到好的渲染速度
这两个新的api返回值是utf-8编码的字节流