render 方法的注意点
多次渲染, 后渲染的会覆盖先渲染的内容，render方法一次只能渲染一个元素或者组件，render方法最多只能接收3个参数，所以不能同时渲染多个元素
<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()的第二个参数中添加
注意事项：如果想给元素绑定事件, 那么事件名称必须是驼峰命名
<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 = '';
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中, 修改完数据之后, 是不会自动更新界面的数据的
