ReactDOM API (v17.0.2)

最新推荐文章于 2023-03-08 10:51:00 发布

RainGirl_

最新推荐文章于 2023-03-08 10:51:00 发布

阅读量626

点赞数

分类专栏： React 文章标签： ReactDOM React

本文链接：https://blog.csdn.net/RainGirlLivia/article/details/116782940

版权

ReactDOM是React的核心组成部分，提供如render、hydrate等API。本文详细介绍了ReactDOM.render、ReactDOM.hydrate、ReactDOM.findDOMNode和ReactDOM.createPortal等方法的使用，包括它们的注意事项和常见应用场景。例如，ReactDOM.render用于在容器中挂载和更新React组件，ReactDOM.hydrate则用于服务端渲染后的客户端渲染。此外，还讨论了ReactDOM.unmountComponentAtNode用于卸载组件的功能。

摘要由CSDN通过智能技术生成

ReactDOM 从原先的React分出来的，它也是React的核心内容；因此一个项目中，React和ReactDOM是一起存在的；并且一些主要的实现如Hooks的逻辑在ReactDOM中实现的；只是它不需要在每个组件都出现，用的多是在AppComponent使用ReactDOM.render方法挂载根组件；

1、ReactDOM给用户提供的API：render、hydrate、findDomNode、createPortal、unmountComponentAtNode、还有其他的一些API(暂不提)；

ReactDOM.render(element, container[, callback]):在提供的container中渲染React元素，并返回对该组件的引用，若是函数组件则返回null；若该组件已挂载在container中，则ReactDOM.render会更新该组件，并仅在需要时改变DOM以映射最新的React元素；使用ReactDOM.render的注意事项：1，ReactDOM.render不会改变容器节点(即container)，element是在container中作为子元素被渲染；2，初次在container渲染，React元素会直接替换掉container中的所有内容，之后的调用会使用React的DOM差分算法进行高效的更新；3，避免使用ReactDOM.render的返回值，而是为根元素添加callback ref(使用回调的ref attribute，回调接收的是对根元素的DOM引用)；4，使用ReactDOM.render()对服务端渲染容器进行hydrate操作的方式已被废弃(会在v17中移除)，使用hydrate()代替；

//html
...

<body>
    <div id="root">
        <!-- React element will be rendered here-->
    </div>
</body>
...

//js
let Child = React.memo(function (){
    //return React.createElement('input'); //在没有使用JSX的情况下；
    return <input />;
});
class App extends React.Component{
    render(){
        //在没有使用JSX的情况下：
        //let child = React.createElement(Child);
        //return React.createElement('div', null, [child]); 
        return <div>
            <Child />
        </div>;     
    }