首頁 探索 說明
登入
Testaccount
/
1.Test
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

相敏敏react

siwat 1 年之前
父節點
e594a413ab
當前提交
5bbdc1ea42
共有 14 個文件被更改，包括 336 次插入 和 12 次删除
分割檢視 顯示文件統計
  1. 0 0
      xiangminmin/react/babel.min.js
  2. 0 0
      xiangminmin/react/react-dom.development.js
  3. 0 0
      xiangminmin/react/react.development.js
  4. 3 3
      xiangminmin/react/study1/1.认识react.html
  5. 3 3
      xiangminmin/react/study1/2.jsx-数据渲染.html
  6. 3 3
      xiangminmin/react/study1/3.jsx-绑定属性.html
  7. 3 3
      xiangminmin/react/study1/4.jsx-绑定样式.html
  8. 47 0
      xiangminmin/react/study2/1.事件处理.html
  9. 36 0
      xiangminmin/react/study2/2.事件this指向.html
  10. 58 0
      xiangminmin/react/study2/3.事件参数.html
  11. 39 0
      xiangminmin/react/study2/4.函数组件创建.html
  12. 52 0
      xiangminmin/react/study2/5.props.html
  13. 28 0
      xiangminmin/react/study2/6.类组件创建.html
  14. 64 0
      xiangminmin/react/study2/7.state.html

+ 0 - 0
xiangminmin/react/study1/babel.min.js → xiangminmin/react/babel.min.js
查看文件


+ 0 - 0
xiangminmin/react/study1/react-dom.development.js → xiangminmin/react/react-dom.development.js
查看文件


+ 0 - 0
xiangminmin/react/study1/react.development.js → xiangminmin/react/react.development.js
查看文件


+ 3 - 3
xiangminmin/react/study1/1.认识react.html
查看文件 

@@ -5,11 +5,11 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- 三个库的引入顺序不能更改 -->
 
     <!-- 将jsx转化为js -->
 
-    <script src="./babel.min.js"></script>
 
+    <script src="../babel.min.js"></script>
 
     <!-- react的核心库 -->
 
-    <script src="./react.development.js"></script>
 
+    <script src="../react.development.js"></script>
 
     <!-- react 操作dom的库 -->
 
-    <script src="./react-dom.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
 </head>
 
 <body>

+ 3 - 3
xiangminmin/react/study1/2.jsx-数据渲染.html
查看文件 

@@ -4,9 +4,9 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
-    <script src="./babel.min.js"></script>
 
-    <script src="./react.development.js"></script>
 
-    <script src="./react-dom.development.js"></script>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
 </head>
 
 <body>
 
     <div id="root"></div>

+ 3 - 3
xiangminmin/react/study1/3.jsx-绑定属性.html
查看文件 

@@ -4,9 +4,9 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
-    <script src="./babel.min.js"></script>
 
-    <script src="./react.development.js"></script>
 
-    <script src="./react-dom.development.js"></script>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
     <style>
 
         .title{
 
             color:royalblue;

+ 3 - 3
xiangminmin/react/study1/4.jsx-绑定样式.html
查看文件 

@@ -4,9 +4,9 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
-    <script src="./babel.min.js"></script>
 
-    <script src="./react.development.js"></script>
 
-    <script src="./react-dom.development.js"></script>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
     <style>
 
         .box{
 
             color:darkorange

+ 47 - 0
xiangminmin/react/study2/1.事件处理.html
查看文件 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        function handleClick(){
 
+            console.log('我是点击事件')
 
+        }
 
+        function handleChange(e){
 
+            console.log('我是输入事件',e.target.value)
 
+        }
 
+        function handleSumbit(e){
 
+            // 阻止事件的默认行为
 
+            //  e.preventDefault() 阻止默认事件
 
+            //  e.stopPropagation() 阻止事件冒泡
 
+            e.preventDefault()
 
+            console.log('我是表单提交事件')
 
+        }
 
+        let element = (
 
+            <div>
 
+                {/*react 事件处理 onXXX 使用驼峰命名法
 
+                    事件绑定使用 { }
 
+                    onClick={事件处理函数}  点击事件
 
+                    onChange={事件处理函数} 输入事件
 
+                    onSubmit={事件处理函数} 表单的提交事件
 
+                */}
 
+                <button onClick={handleClick}>我是一个按钮</button>
 
+                <br/><input type="text" onChange={handleChange}/>
 
+                <form onSubmit={handleSumbit}>
 
+                    {/*表单点击提交后会有一个默认的自动刷新行为*/}
 
+                    <button>提交</button>
 
+                </form>
 
+            </div>
 
+        )
 
+        ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 36 - 0
xiangminmin/react/study2/2.事件this指向.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="btn">第一种</div>
 
+    <div id="root"></div>
 
+    <!-- 
+        this指向：
 
+            在方法中 this 指向当前DOM元素
 
+            改变this指向方法
 
+                1. bind
 
+                2. ()=>{} 箭头函数
 
+     -->
 
+    <script type="text/babel">
 
+        // 第一种 this指向
 
+        function handleClick(){
 
+            console.log(this)
 
+        }
 
+        document.getElementById("btn").onclick = handleClick
 
+        // 第二种 改变this指向
 
+        // call apply bind
 
+        let person = {
 
+            str:"我是一个字符串"
 
+        }
 
+        let element = <div onClick={handleClick.bind(person)}>第二种</div>
 
+        ReactDOM.createRoot(document.querySelector('#root')).render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 58 - 0
xiangminmin/react/study2/3.事件参数.html
查看文件 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="btn">第一种</div>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 第一种 this指向
 
+        function handleClick(){
 
+            console.log(this)
 
+        }
 
+        document.getElementById("btn").onclick = handleClick
 
+        // 第二种 改变this指向
 
+        // call apply bind
 
+        let person = {
 
+            str:"我是一个字符串"
 
+        }
 
+        // let element = <div onClick={handleClick.bind(person)}>第二种</div>
 
+        function handleClick1(e){
 
+            console.log(this,'正常') // undefined
 
+            console.log(e,'事件') //存在事件对象
 
+        }
 
+        function handleClick2(e,...arg){
 
+            console.log(e.target)
 
+            console.log(arg)
 
+        }
 
+        function handleClick3(e){
 
+            console.log(e)
 
+        }
 
+        let element = (
 
+            <div>
 
+                <p onClick={handleClick1.bind(person)}>事件1</p>
 
+                {/*套壳*/}
 
+                <p onClick={(e)=>{
 
+                    handleClick2(e,3,444,5555)
 
+                }}>事件2</p>
 
+                {/*
 
+                    传递多个参数时，接受参数需要解构
 
+                    null 不占位
 
+                    默认传递的参数是事件对象
 
+                    bind虽然可以改变this指向，但是位置固定并不灵活
 
+                    箭头函数 可以套壳比较灵活
 
+                */}
 
+
 
+                <p onClick={handleClick3.bind(null,111)}>事件3</p>
 
+            </div>
 
+        )
 
+        ReactDOM.createRoot(document.querySelector('#root')).render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 39 - 0
xiangminmin/react/study2/4.函数组件创建.html
查看文件 

@@ -0,0 +1,39 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 函数组件 首字母要大写
 
+        // 函数组件中 null undefined boolean Object 无法渲染
 
+        // 渲染object 会报错
 
+        function MyCom(){
 
+            return (
 
+                <div>
 
+                    <h2>我是一个函数组件</h2>
 
+                    {1234}
 
+                    {"我是一个字符串"}
 
+                    {[1,2,3,4,5]}
 
+                    {null}
 
+                    {undefined}
 
+                    {true}
 
+                    {false}
 
+                    {/*
 
+                        函数组件中不能渲染对象
 
+                        {{"name":"张三"}}
 
+                    */}
 
+                </div>
 
+            )
 
+        }
 
+        let element = <MyCom/>
 
+        ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 52 - 0
xiangminmin/react/study2/5.props.html
查看文件 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        //父组件向子组件传参使用 props 单向数据流 不能修改 只读
 
+        function Parent(){
 
+            return (
 
+                <div style={{border: "1px red solid"}}>
 
+                    <h2>我是父组件</h2>
 
+                    <Child name="海绵宝宝" age={4}/>
 
+                </div>
 
+            )
 
+        }
 
+        function Child(props){
 
+            // console.log(props,"子组件的内容")
 
+            return (
 
+                <div style={{border: "1px blue solid"}}>
 
+                    <h2>我是子组件</h2>
 
+                    <p>我是父组件传递过来的参数：我是 {props.name} 我的年龄是 {props.age}</p>
 
+                    <button onClick={()=>{
 
+                        handleGet(props)
 
+                    }}>获取内容</button>
 
+                    
+                    {/*
 
+                        props 是只读的 不能修改
 
+                        <button onClick={()=>{
 
+                            handleChange(props)
 
+                        }}>修改内容</button>
 
+                    */}
 
+                </div>
 
+            )
 
+        }
 
+        function handleChange(props){
 
+            props.name = "小猪佩奇"
 
+        }
 
+        function handleGet(props){
 
+            console.log("获取内容是：" + props.name + "年龄是" + props.age)
 
+        }
 
+        let element = <Parent/>
 
+        ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 28 - 0
xiangminmin/react/study2/6.类组件创建.html
查看文件 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 类组件 遵从es6规范 可以修改
 
+        class MyCom extends React.Component {
 
+            render(){
 
+                return (
 
+                    <div style={{border: "1px red solid"}}>
 
+                        <p>我是类组件</p>
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        let element = <MyCom/>
 
+        ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 64 - 0
xiangminmin/react/study2/7.state.html
查看文件 

@@ -0,0 +1,64 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="../babel.min.js"></script>
 
+    <script src="../react.development.js"></script>
 
+    <script src="../react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 类组件 state 可以修改
 
+        // 计数器 
+        class MyCom extends React.Component {
 
+            // 定义初始数值
 
+            state = {
 
+                count : 0,
 
+                title : "计数器"
 
+            }
 
+            // 旧版本的定义方法
 
+            // constructor(){
 
+            //     super(props)
 
+            //     state = {
 
+            //     }
 
+            // }
 
+            
+            // 数据更新视图未改变 
+            // vue的解决方法  使用 Vue.set 或者 this.$set
 
+            // react的解决方法  使用 this.setState({})
 
+
 
+            // 类组件中 方法无需使用function关键字直接写即可
 
+            handlerAdd(){
 
+                // console.log(this)
 
+                this.setState({
 
+                    count: this.state.count + 1
 
+                })
 
+            }
 
+
 
+            handlerReduce=()=>{
 
+                // console.log(this)
 
+                this.setState({
 
+                    count: this.state.count - 1
 
+                })
 
+            }
 
+
 
+
 
+            render(){
 
+                return (
 
+                    <div>
 
+                        <p>{this.state.title}</p>
 
+                        <p>当前数值：{this.state.count}</p>
 
+                        <button onClick={this.handlerAdd.bind(this)}>+</button>
 
+                        <button onClick={this.handlerReduce}>-</button>
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        let element = <MyCom/>
 
+        ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+    </script>
 
+</body>
 
+</html>