React学习之路(1)

xleesecondfloorrr
88 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

React（1）

特点

  • 负责构建界面，替代复杂的dom操作的js库
  • 特点：虚拟dom，声明式，基于组件，支持服务端渲染
  • 通过虚拟dom来操作原生dom
  • 命令式：过程导向，声明式：结果为导向
  • 网页中的一切以组件为基础，网页由组件组成

利用react和react-dom文件使用react

<script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>

创建一个react的虚拟dom元素

const div = React.createElement('div',{},'我是react创建的div的子元素');   
        console.log(div);

React.createElemet()

  • 第一个参数元素名，第二个参数是元素中的属性，第三个参数是元素的子元素

将react元素添加到网页中

  • 因为创建的是react元素，根元素是dom元素，所以需要获取根元素对应的react元素，

    获取一个dom对应的react元素

    将react创建的元素添加进去

    const div = React.createElement('div',{},"我是react创建的div");   
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(div);

三个相关的API

  • React.createElemenet()

    用来创建一个react元素，第一个参数是HTML元素(必须是小写)，第二个参数是标签中的属性，在设置事件时，属性名需要改成驼峰命名法

    事件属性后需要加函数

    class属性需要className属性代替

    第三个元素可以放多个子元素

     const button = React.createElement('button',{},'点我一下');
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(button);

    React元素最终会通过虚拟DOM转换为真实的DOM元素，React元素一旦创建则无法被修改，只能使用新创建的元素去替换

通过虚拟dom对dom进行操作，不会对性能造成很大的影响，当调用render比较时，只在真实DOM中更新发生变化的元素

  • ReactDOM.createRoot

  • root.render()

    将react元素渲染到根元素中

    根元素中所有的内容都会被删除，被react元素替换

    当重复调用render时，react会将两次的渲染结果进行比较，对DOM进行最少的操作，

    render只是往根元素里边加东西，不会对它本身产生任何影响。可以在不覆盖现有子节点的情况下，将组件插入DOM

    中

avatar
文章
阅读
粉丝