React-React的写法

render 方法的注意点

多次渲染, 后渲染的会覆盖先渲染的内容，render方法一次只能渲染一个元素或者组件，render方法最多只能接收3个参数，所以不能同时渲染多个元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./react.development.v17.js"></script>
    <script src="./react-dom.development.v17.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    // 1.创建虚拟DOM
    let message = 'BNTang';
    let oDiv = React.createElement('div', null, message);
    let oBtn = React.createElement('button', null, '按钮');

    // 2.将虚拟DOM转换成真实DOM
    ReactDOM.render(oDiv, document.getElementById('app'), () => {
        console.log('已经将虚拟DOM转换成了真实DOM, 已经渲染到界面上了');
    });
    ReactDOM.render(oBtn, document.getElementById('app'), () => {
        console.log('已经将虚拟DOM转换成了真实DOM, 已经渲染到界面上了');
    });
</script>
</body>
</html>

createElement 方法的注意点

可以添加3个以上的参数, 后续的参数都会作为当前创建元素的内容进行处理。

给元素添加监听事件

给元素添加监听事件的本质就是给元素添加属性，所以可以在createElement()的第二个参数中添加

注意事项：如果想给元素绑定事件, 那么事件名称必须是驼峰命名

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./react.development.v17.js"></script>
    <script src="./react-dom.development.v17.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    // 1.创建虚拟DOM
    let message = 'BNTang';
    let oDiv = React.createElement('div', null, message);
    let oBtn = React.createElement('button', null, '按钮');
    let oRoot = React.createElement('div', {onClick: myFn}, oDiv, oBtn);

    // 2.将虚拟DOM转换成真实DOM
    ReactDOM.render(oRoot, document.getElementById('app'), () => {
        console.log('已经将虚拟DOM转换成了真实DOM, 已经渲染到界面上了');
    });

    function myFn() {
        message = 'www.it6666.top';
        let oDiv = React.createElement('div', null, message);
        let oBtn = React.createElement('button', null, '按钮');
        let oRoot = React.createElement('div', {onClick: myFn}, oDiv, oBtn);
        ReactDOM.render(oRoot, document.getElementById('app'), () => {
            console.log('已经将虚拟DOM转换成了真实DOM, 已经渲染到界面上了');
        });
    }
</script>
</body>
</html>

默认情况下在React中, 修改完数据之后, 是不会自动更新界面的数据的

posted @ 2020-11-01 22:56  BNTang  阅读(136)  评论(0)  编辑  收藏  举报