react 学习笔记1

最新推荐文章于 2024-09-19 10:55:28 发布

canglingyue

最新推荐文章于 2024-09-19 10:55:28 发布

阅读量501

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/canglingyue/article/details/50578023

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、React 在虚拟DOM上创建元素，然后将他们渲染到真实DOM上。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../react/react.min.js"></script>
</head>
<body>
<div class="div1"></div>
<script>
    var el = React.createElement(
            "ul",
            null,
            React.createElement("li",null,"One"),
            React.createElement("li",null,"two")
    );
    React.render(el,document.querySelector(".div1"));
</script>
</body>
</html>

上面使用了react的两个方法

1）、React.createElement(type,[props],[children...])

作用是在虚拟DOM上创建指定的React 元素

参数：

① type 用来指定要创建的元素类型，可以是字符串或 react 的组件类型。当使用字符串时，这个参数应当是标准HTML的标签，如 div 、p 、ul等。

② props 是可选的JSON 对象，用来指定元素的附加属性，比如样式、CSS的类名等。如果没有可以设置为null ，如上面的示例。

③ children 开始的所有参数，都被认为是这个元素的子元素。react 通过这些子元素，来构造虚拟的DOM树。

2）、React.render(element,container,[callback])

将虚拟DOM上的对象渲染到真实DOM上

参数：

① element 是我们使用createElement 方法创建的react 元素，注意：不是HTML元素

② container 是真实DOM中的HTML 元素，作为渲染的目标容器，他的内容将被render() 方法的执行改变。