|
|
@@ -12,35 +12,63 @@
|
|
|
<script src="./react-dom.development.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <!--
|
|
|
- React:用于构建web与原生交互界面的库
|
|
|
- vue和react区别：
|
|
|
- vue.js => 偏向于html扩展
|
|
|
- react.js => 偏向于javascript扩展
|
|
|
-
|
|
|
- vue:
|
|
|
- 1.直接引入vue第三方库
|
|
|
- 2.vue ui去创建
|
|
|
- 3.vue create 项目名
|
|
|
-
|
|
|
- react:
|
|
|
- 1.通过第三方库引入
|
|
|
-
|
|
|
- -->
|
|
|
<div id="root"></div>
|
|
|
+ <div id="btn">这是一个按钮</div>
|
|
|
<!-- type="text/babel"
|
|
|
告诉babel库 将jsx转成js
|
|
|
+
|
|
|
+ this指向：
|
|
|
+ 方法中 this指向当前标签
|
|
|
+ 改变this指向方法
|
|
|
+ 1.bind
|
|
|
+ 2.箭头函数 ()=>{}
|
|
|
-->
|
|
|
<script type="text/babel">
|
|
|
- // 需求：将标签渲染到页面中
|
|
|
- //1.创建标签
|
|
|
- const snow = <h1>今天下大雪</h1>;
|
|
|
- // 2.获取渲染位置
|
|
|
- const getRoot = document.getElementById("root");
|
|
|
- // 3.将新标签渲染到页面上
|
|
|
- // ReactDOM.createRoot(指定渲染页面)
|
|
|
- // render(渲染的内容)
|
|
|
- ReactDOM.createRoot(getRoot).render(snow);
|
|
|
+ function onClick(){
|
|
|
+ console.log(this)
|
|
|
+ }
|
|
|
+ function handleClick1(e){
|
|
|
+ console.log(this,'正常') // undefined
|
|
|
+ console.log(e,'事件') //存在事件对象
|
|
|
+ }
|
|
|
+ // 解构接受参数
|
|
|
+ function handleClick2(e,...user){
|
|
|
+ console.log(e.target)
|
|
|
+ console.log(...user)
|
|
|
+ }
|
|
|
+ function handleClick3(e){
|
|
|
+ console.log(e)
|
|
|
+ // console.log(id)
|
|
|
+ }
|
|
|
+ // 第一种
|
|
|
+ document.getElementById("btn").onclick = onClick;
|
|
|
+ var aaaa = {name:"My name is Tutu"};
|
|
|
+ // 改变this指向：call bind apply
|
|
|
+ // 第二种
|
|
|
+ // let element = <div onClick={onClick.bind(aaaa)}>这是第二个按钮</div>
|
|
|
+ let element = (
|
|
|
+ <div>
|
|
|
+ <p onClick={handleClick1.bind(aaaa)}>事件1</p>
|
|
|
+ {/*套壳*/}
|
|
|
+ <p onClick={(e)=>{
|
|
|
+ handleClick2(e,3,444,5555)
|
|
|
+ }}>事件2</p>
|
|
|
+ {/*
|
|
|
+ 传递多个参数时 接收参数需要解构
|
|
|
+ */}
|
|
|
+ <p onClick={handleClick3.bind(null,44)}>事件3</p>
|
|
|
+ {/* null不占位 */}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ {/*
|
|
|
+ 默认传递事件对象
|
|
|
+ bind虽然可以改变this指向 但是位置固定并不灵活
|
|
|
+ 箭头函数 可以套壳比较灵活
|
|
|
+
|
|
|
+ **/}
|
|
|
+ let newPage = ReactDOM.createRoot(document.querySelector("#root"));
|
|
|
+ newPage.render(element)
|
|
|
</script>
|
|
|
|
|
|
</body>
|
e