1. React基础

1-1. react-调试插件安装

浏览器右上角 ... ===> 更多工具 ===> 扩展程序 ==> 开启开发者模式 ==> 将调试插件包拖拽进来即可

1-2. react 基本使用

React 需要引入两个包 React ReactDOM

需要创建一个根节点【舞台】，进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 提供了 React对象，React核心对象 -->
    <script src="./lib/react.development.js"></script>
    <!-- 提供了ReactDOM 对象，专门用来操作DOM DOM三个字母都是大写的-->
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
    <!-- react 操作的舞台 -->
    <div id="root"></div>

    <script>
        // 创建一个根节点， 建立 react与dom元素的联系
        // create 创建
        // root 根 
        // createRoot : 创建根节点【搭建一个舞台】
        const root = ReactDOM.createRoot(document.getElementById('root'))

        // 使用 root.render(内容)， 会将内容渲染到 id 是 root的节点中
        root.render('hello React!')
    </script>
</body>
</html>

1-3. 注意事项

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <div class="box"></div>
</body>
<script>
    {
        // 1. 可以在同一个页面有多个容器
        // const root = ReactDOM.createRoot(document.querySelector("#root"));
        // root.render('root容器')

        // const box = ReactDOM.createRoot(document.querySelector('.box'))
        // box.render('box 容器')
    }
    {
        // 2. 同一个容器可以进行多次渲染，后面的结果会覆盖前面的
        // const root = ReactDOM.createRoot(document.querySelector("#root"));
        // root.render('首次渲染')
        // root.render('二次渲染')
    }
    {
        // 3. 同一个容器不允许被多次指定为react容器，没有报错，会弹警告。不建议这样操作
        // const root1 = ReactDOM.createRoot(document.querySelector("#root"));
        // const root2 = ReactDOM.createRoot(document.querySelector("#root"));
        // root1.render('root 一')
        // root2.render('root 二')
    }
    {
        // 4. 不能将 html body 指定为 react容器
        // html
        // const root = ReactDOM.createRoot(document.documentElement);
        // root.render('html')
        // 
        // const root = ReactDOM.createRoot(document.body);
        // root.render('body')
    }
    {
        // 5. 支持链式调用
        ReactDOM.createRoot(document.querySelector('#root')).render('链式调用')
    }
</script>

</html>

1-4. 虚拟DOM

<script>
    /**
     *  react vue 用到的页面渲染效率更高，因为都引入了虚拟dom的概念！
     *  1. 页面是如何渲染的？
     *     地址栏中输入网址按下回车，会发送一个请求，请求之后会得到响应的响应结果
     *     1-1. 响应一个html页面：浏览器的html解析器会对html进行解析，并生成 DOM 树
     *     1-2. 响应一个css， 浏览器的css解析器会对css进行解析，生成一个css的规则树
     *     1-3. 响应一个js， js有可能会操作 dom 也有可能会操作 css样式，会造成重排和重绘
     *     
     *  2. 什么是重排和重绘？
     *     css中的一些几何属性【位置、大小、宽高】，一旦发生变化，浏览器会将几何属性重新计算，因为几何属性不光影响自己，还会影响周围元素。重新计算的过程就叫重排。重排之后就会进行重绘。渲染的过程就叫重绘。重排必然导致重绘
     * 
     *  3. 传统DOM操作的缺陷！
     *     频繁进行dom操作，导致大量重排和重绘，非常有影响性能！
     *     this.style.height = 100px;
     *     this.style.left = '200px'
     *     
     *  4. React、vue 性能更好，为什么？
     *     React 和 vue引入了虚拟dom 优化性能
     *     
     *  5. 虚拟DOM是什么？
     *     1. 虚拟DOM就是一个对象，与真实DOM的属性一一对应
     *     2. 虚拟DOM 通过 render 可以转化为真实DOM
     *     3. 虚拟DOM 是一个轻量级的对象，属性比真实dom少，只要需要的指定属性
     *     4. 虚拟dom 在react中，我们又称之为时 react元素 
     *     5. 虚拟dom的创建有两种方法
     *         1. 通过 React.createElement() 创建,[不会用它，了解]
     *         2. 通过 jsx 创建
     * 
     */
</script>

1-5. `createElement` 创建 react元素

语法： React.createElement(标签名, 属性, 子元素1, 子元素2 .....)

1-5-1. 基本使用

const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 语法：React.createElement(标签名, 属性, 子元素1, 子元素2 .....)
        
        // 1. 创建虚拟dom
        const div = React.createElement('div', {id:'c1',school:'atguigu'},'shangguigu', 'yuonly','123123')
        console.log('div: ',div)
      
        // 通过render方法将虚拟dom转化为真实dom渲染到页面中
        root.render(div)
        // 真实dom
        // const rootDiv = document.getElementById('root')
        // console.log('rootDiv: ', rootDiv)

    }

1-5-2. 没有属性的元素标签，使用null 、undefined、{}占位

// 2. 如果没有标签属性，如何创建react元素.需要使用 null、undefined、{}、'' 对第二个参数进行占位
const span = React.createElement('span',null,'我是 span')
// const span = React.createElement('span','','我是 span')
// const span = React.createElement('span',{},'我是 span')
// const span = React.createElement('span',undefined,'我是 span')
// const span = React.createElement('span',123123,'我是 span') // 不报错，但不推荐
console.log(span)
root.render(span)

1-5-3. 特殊属性`className`

样式类 class 与 js 的关键字class 同名，所以，使用className

// 特殊属性 className
const root = ReactDOM.createRoot(document.querySelector('#root'))
// 创建span标签 类名是 c1
const span = React.createElement('span', { className: 'c1' }, '文字是红色')
console.log(span);
root.render(span)

// 为什么class属性，要使用className
// 因为class 是js的关键字，用来定义 类的

const p1 = document.getElementById('p1')
// 真实DOM元素，也是用className 来定义 class的
// react元素的属性和真实dom的属性，是一一对应的
console.dir(p1)

1-5-4. 创建复杂结构-元素嵌套-及其问题

/**
     * 
     *  当标签套标签时，就需要进行 react元素的嵌套
     */
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    
    const span = React.createElement('span',{className:'red'},'我是span')
    const div = React.createElement('div', {className:'c1'}, span , React.createElement('p',{school:'atuigu'},'我是p标签'))
    root.render(div)

2. `jsx`

jsx = js + xml

作用：可以快速创建react元素【虚拟dom】

xml: 是一种数据结构，是json格式的数据出现之前，使用的通信数据结构
<user>
	<name>atuigu</name>
    <age>10</age>
</user>

let user = {
	"name":"atuigu",
	"age":10
}

2-1. jsx语法在html文件中解析

需要两个条件

引入 babel ，因为浏览器本身不认识jsx

script标签加上type="text/babel"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    // const div = React.createElement('div',null,'div元素')
    // root.render(div)

    // jsx 创建react元素
    // 浏览器本身不认jsx语法，需要进行语法转化，使用babel进行转化
    let div = <div>div元素</div>
    root.render(div)
</script>
</html>

2-2. jsx基本使用

jsx 语法书写非常像html标签，但本质是 react元素。最终在底层会转化为 React.createElement 的语法。

构建复杂结构页面时，使用 () 括起来，可以进行换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    // const div = React.createElement('div',null,'div元素')
    // root.render(div)

    // jsx 创建react元素
    // 浏览器本身不认jsx语法，需要进行语法转化，使用babel进行转化
    // let div = <div>div元素</div>
    // root.render(div)

    // 创建复杂结构,使用 （）括起来，可以进行换行
    let div = (
        <div className="c1">
            <h1>jsx创建react元素</h1>
            <span>我是span</span>
            <p>我是p标签</p>
            <div>
                <span>jsdklfj</span>
            </div>
        </div>
    )
    root.render(div)
</script>
</html>

2-3. `jsx`标签注意事项

jsx 标签只能写两种：

html标签: 全部用小写

组件标签：首字母大写

const root = ReactDOM.createRoot(document.querySelector("#root"));
/**
     *  注意事项：
     *  1. jsx 语法标签名如果是html元素标签，要用小写
     *  2. jsx 只能写html标签，写别的不报错。但是 react元素最终会render转化为真实dom。
     *     写别的能转化也能渲染，但是浏览器不认识，没有意义
     *  3. jsx除了写浏览器认识的标签，首字母大写的标签，会当做组件来处理
     * 
     *      <Student />   === > Student 是一个组件
     *      <Header />    === > Header 组件
     * 
     */
root.render((
    <div>
    <username>yuonly</username>
    <age>age</age>
    </div>
))

2-4. jsx中的插值表达式

2-4-1. 渲染值基本使用

语法： { js 表达式 }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /**
     *  js代码由两部分组成： 1. js语句  2. js表达式
     *  js语句： 赋值语句、if。。。else 条件判断语句、for 循环语句、switch 语句
     *        作用：控制代码的运行走向。语句是没有值
     * 
     *  js表达式：有值的js代码
     *        1. 三元表达式
     *        2. 逻辑表达式： 5 && 8  
     *        3. 变量、常量
     *        4. 函数返回值： fn()
     * 
     *  jsx 中的插值表达式：
     *      作用：将表达式的值，渲染到页面
     *      语法： {js表达式}  
     *      数据类型： usonb        you so niu b
     *          u:undefined
     *          s:string、symbol
     *          o:object [object、function、数组]
     *          n: null、number
     *          b: boolean: 使用插值语法，什么都不渲染
     *          1. 
     * 
     */
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    const num = 2;
    const obj = { username: 'atuigu', age: '10' }
    const fn = function () {
        console.log(123)
        //return {name:'atuigu'} // 报错
        return 123; //渲染123
        return undefined;// 什么都不渲染
    }
    const flag = 1;
    root.render((
        <div>
            <h3>数据类型：</h3>
            <p>数字：{1} - {num}</p>
            <p>字符串: {'我是字符串'}</p>
            <p>布尔值-true: {true}</p>   {/*布尔值true：使用插值语法，什么都不渲染*/}
            <p>布尔值-false: {false}</p> {/*布尔值false：使用插值语法，什么都不渲染*/}
            <p>null: {null}</p>          {/*null：使用插值语法，什么都不渲染*/}
            <p>undefined: {undefined}</p>{/*undefined：使用插值语法，什么都不渲染*/}
            {/*<p>对象： {{username:'atuigu',age:'10'}}</p> 对象：直接报错，对象不是一个合法的react子元素*/}
            <p>数组： {[1, 2, 3, 4]}</p>{/*将数组中的每一个元素遍历出来，挨个进行渲染*/}
            {/*以下代码会报错，因为会把数组中每一个元素拿出来渲染，发现对对象，渲染不了*/}
            {/*<p>数组中的元素是对象呢？{[{id:1,name:'atguigu'},{id:2,name:'yuonly'}]}</p>*/}
            {/*<p>函数： {fn}</p>   函数的定义也无法正常渲染 */}

            <p>函数的返回值： {fn()}</p>
            <p>三元表达式: {flag === 1 ? '真' : '假'}</p>
            <p>逻辑&& 运算: {5 && 8}</p>
            <p>逻辑|| 运算: {5 || 8}</p>
        </div>
    ))
</script>

</html>

2-4-2. 条件渲染

单分支：如果 a成立，那么....

sex === '男' && 'boy'

sex !== '男' || 'boy'

if(sex==='男') 'boy'

双分支的：如果a成立，xxx，否则，

xxx if(){}else{}

三元表达式

多条件的：封装成一个函数处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    /**
     *  条件渲染：
     *  1. 单分支：   如果 a成立，那么....          sex === '男' && 'boy'    sex !== '男' || 'boy'    if(sex==='男') 'boy'
     *  2. 双分支的： 如果a成立，xxx，否则，xxx   if(){}else{}              三元表达式
     *  3. 多条件的： 封装成一个函数处理
     * 
     * 
     *  需求：
     *   如果sex 是男，那么么显示男同学，否则显示女同学
     * 
     */
    const sex = 1; // 1 表示男  0 表示女

    // 方式一：
    // const vdom = (
    //     sex === 1 ? <div>男</div> : <div>女</div>
    // )

    // 方式二：
    // let vdom;
    // if(sex===1){
    //     vdom = <div>男</div>
    // }else{
    //     vdom = <div>女</div>
    // }
    // root.render((
    //    vdom
    // ))


    // 单分支逻辑运算
    let flag = 2;// 1 阴性 2 阳性 
    // 方式一：
    // let vdom;
    // if (flag === 2) {
    //     vdom = <div>不许进入</div>
    // }

    // 方式二： 逻辑运算
    // let vdom = flag === 2 && <div>不许进入</div>
    // let vdom = flag !== 2 || <div>不许进入</div>
    // root.render((
    //     vdom
    // ))

    // 多分支条件渲染
    /**
     * 90分以上：优秀毕业生
     * 75分以上：学的不错
     * 60分以上：及格
     * 40分以上：仍需努力，还有救
     * 0以上   ：洗洗睡吧
     */

    function getLevel(score){
        if(score>=90) return '优秀毕业生'
        if(score>=75) return '学的不错'
        if(score>=60) return '及格'
        if(score>=40) return '仍需努力，还有救'
        if(score>=0) return '洗洗睡吧'
    }
    let vdom = (
        <div>{getLevel(30)}</div>
    )
    root.render((
        vdom
    ))
</script>

</html>

2-4-3. 插值表达式赋值属性

表达式外部没有 “”

自定义属性也可以赋值

可以使用... 扩展运算进行批量赋值

const root = ReactDOM.createRoot(document.querySelector("#root"));
    const width = 300
    const height = 100

    const styles = {
        width:500,
        height:150,
        school:'atguigu'
    }
    root.render((
        <div>
            <div width='200' height='200'>123123</div>
            {/*一：属性可以用插值表达式赋值：表达式外部不要有""号 */}
            <table border='1' width={width} height={height} id="d1" className="c1">
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>操作</td>
                </tr>
            </table>
            {/*二：自定义属性也可以用插值表达式赋值 */}
            <table border='1' width={styles.width} height={styles.height} school={styles.school} id="d1" className="c1">
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>操作</td>
                </tr>
            </table>
            {/*三：使用扩展运算，批量进行属性赋值 */}
            <table border='1' {...styles} id="d1" className="c1">
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>操作</td>
                </tr>
            </table>

        </div>
    ))

2-5. 样式处理

2-5-1. style 行内样式

行内样式使用 style属性，属性值必须是一个对象

style的值必须是一个对象：第一个{}表示的是插值表达式的边界，第二个{}表示对象的边界

如果样式的单位是px，那么px可以省略,值直接写成数字即可

如果是复合属性，那么要使用小驼峰命名法

const styles = {
        width: '300px',
        height: '100px',
        background: 'red'
    }
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    root.render((
        <div>
            <div style={styles}>
                我是测试行内样式的div
            </div>
            {/* style的值必须是一个对象：第一个{}表示的是插值表达式的边界， 第二个{}表示对象的边界 */}
            <div style={{ width: '300px', height: '100px', border: '1px solid blue' }}>

                我是测试行内样式的div
            </div>

            {/* 如果样式的单位是px，那么px可以省略,值直接写成数字即可 */}
            <div style={{ width: 300, height: 100,fontSize:30, border: '1px solid red' }}>
                我是测试行内样式的div
            </div>

            {/* 如果是复合属性，那么要使用小驼峰命名法 */}
            <div style={{ width: 300, height: 100,fontSize:30,backgroundColor:'skyblue', border: '1px solid red' }}>
                我是测试行内样式的div
            </div>

        </div>
    ))

2-5-2. `className`通过类名定义样式

必须使用className指定类名，不能使用class

className ：可以直接赋值字符串

className：多个样式类名中间用空格隔开，可以同时生效

如果样式是一个数组，使用 join(' ')，进行赋值渲染

const root = ReactDOM.createRoot(document.querySelector("#root"));
    const classStr = 'c1 bg1'
    const classArr = ['c1', 'bg1', 'f1']
    root.render((
        <div>
            <div className="c1" >c1 class 测试</div>
            <div className={"bg1"}>bg1 class 测试</div>
            <div className={"f1"}>f1 class 测试</div>
            <div className={classStr}>c1 bg1 同时，字符串写法</div>
            <div className="c1 bg1">c1 bg1 同时，字符串写法</div>

            <hr />
            {/* 
                插值语法渲染数组，如果是渲染内容，那么挨个遍历渲染 
                如果数组是渲染className ， 那数组中的每一个元素中间用 , 隔开了
            */}
            <div className="c1 bg1 f1">c1 bg1 f1 样式同时出现 数组写法</div>
            <div className={classArr}>c1 bg1 f1 样式同时出现 数组写法，直接写不好使，中间有,</div>
            <div className={classArr.join(' ')}>c1 bg1 f1 样式同时出现 数组写法</div>
            
            <div>{classArr}</div>
        </div>
    ))

2-6- 列表渲染

利用react渲染数组，是将数组中的每一项，都拿出来自动遍历的特性，将普通的数组数据，通过map方法，映射成react元素的数组。进而实现列表数据的渲染

key的问题：

作用：用于react进行diff算法时，就节点进行比较，可以提升渲染效率，实现最小量更新的目的【后面会详细讲】

key必须不能重复

key的取值问题：

使用数据的唯一标识作为key值，一般是 id

也可以使用 index 索引作为key【特定情况可用，不推荐】

key 最终不会被渲染到真实dom上，仅用于diff算法

    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // {
    //     // 1. {} 可以将数组中的每一个元素，都遍历出来直接渲染
    //     const arr = [1, 2, 3, 4]
    //     root.render((
    //         <div>{arr}</div>
    //     ))
    // }

    {
        // 2. 插值表达式渲染的数组，数组中的元素可以是react元素
        // const arr = [<p>1</p>, <p>2</p>, <p>3</p>]
        // root.render((
        //     <div>{arr}</div>
        // ))
    }
    {
        // 3. 将普通数组，转化为react元素的数组，然后渲染
        // 3-1. for循环进行转化
        // let arr = [1,2,3,4]
        // let elementArr = []
        // for(let i = 0;i<arr.length;i++){
        //     elementArr[i] = <p>{arr[i]}</p>
        // }
        // root.render((
        //     <div>{elementArr}</div>
        // ))

        // 3-2. forEach转化
        // let arr = [1,2,3,4]
        // arr.forEach((item,index)=>{
        //     arr[index] = <p>{item}</p>
        // })  
        // root.render((
        //     <div>{arr}</div>
        // ))

        // 3-3. map转化 [推荐]
        // map: 将原数组中的每一个元素，进行映射，映射出一个新数组，新数组的长度和原数组一致
        let arr = [1, 2, 3, 4]
        // let newArr = arr.map(item=>{
        //     return item * 2
        // })
        // console.log(arr,newArr)


        // let newArr = arr.map(item => {
        //     return <p>{item}</p>
        // })
        // console.log(newArr)
        // root.render((
        //     <div>{newArr}</div>
        // ))

        // 下面代码与上面 7 行等价
        // root.render((
        //     <div>{arr.map(item => <p>{item}</p>)}</div>
        // ))

        // 4. 关于控制台报的 key的错误，解决方案
        // 当做列表渲染的时候，由于diff 算法的原因，需要给每一个遍历的元素标签加上唯一的 key属性值
        // key属性值不能重复. 
        // 所以我们一般使用数据的 id [唯一标识作为key值]
        // key属性仅用作diff算法，渲染完成后，不会出现在真实dom标签上
        // key 可以使用 索引作为key值，但是不推荐。

        // root.render((
        //     <div>{arr.map(item => <p key={item}>{item}</p>)}</div>
        // ))

        // 5. 使用map渲染元素是对象的数组

        const users = [
            {
                id: 1,
                username: 'atguigu',
                pwd: 'skdjflskfds'
            },
            {
                id: 2,
                username: 'yuonly',
                pwd: '243124'
            },
            {
                id: 3,
                username: 'houhou',
                pwd: '12312321'
            }
        ]

        root.render((
            <div>
                <ul>
                    {/*
                        {users.map(u => {
                            return (
                                <li key={u.id}>
                                    <p>id:{u.id}</p>
                                    <p>username:{u.username}</p>
                                    <p>pwd:{u.pwd}</p>
                                </li>
                            )
                        })}

                        以上代码还可以省略 {} 和return 见下面
                    */}
                    {users.map(u => (
                        <li key={u.id}>
                            <p>id:{u.id}</p>
                            <p>username:{u.username}</p>
                            <p>pwd:{u.pwd}</p>
                        </li>
                    ))}
                </ul>
            </div>
        ))

    }

2-6. jsx中的事件

2-6-1. 原生dom事件

let aBtn = document.querySelector('a')
        aBtn.onclick = function(e){
            console.log('a')
            // 阻止默认行为
            // 方式一：
            // e.preventDefault();
            // 方式二：
            return false;
        }

        function btn1Fn(e, that){
            console.log('btn',e)
            // 此处this指向window，说明函数的调用者是 window
            console.log(this)
            // 要想获取指向当前按钮的实例，需要通过参数进行接收
            console.log('that: ',that)
        }

        let input1 = document.querySelector('[name="username"]')
        // 绑定onchange事件: 原生onchange事件，是文本框失去焦点时触发
        // onchange 的事件对象类型就是 Event 

        input1.onchange = function(e){
            console.log('onchange e: ',e)
            console.log('input value : ',e.target.value)
        }

        let input2 = document.querySelector('[name=pwd]')

        // 原生的oniput事件：是输入内容有变化就触发. 事件类型是 InputEvent
        input2.oninput = function(e){
            console.log('oninput e: ',e)
            console.log('pwd value: ', e.target.value)
        }

2-6-2. jsx中的事件

原生的绑定事件： on+事件名[小写的] ==> onclick onchange oninput onmousemove

jsx中的事件绑定： on + 事件名[首字母大写] => onClick onChange onInput onMousemove
```
 onClick={函数的定义}
```

jsx中的事件对象：是经过react包装处理后的事件对象，原生的事件对象存储在了 navtiveEvent属性上

                 jsx事件对象更好用，因为react已经帮我们做完了兼容性的处理

jsx中的事件回调函数，是window调用的，但react中是严格模式，所以，this指向undefined

jsx中的 onChange事件，就是原生dom事件中的 oninput事件

阻止默认行为： `e.preventDefault()`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /**
     * 原生的绑定事件： on+事件名[小写的]  ==> onclick  onchange oninput onmousemove
     * jsx中的事件绑定： on + 事件名[首字母大写] => onClick  onChange onInput onMousemove
     *      onClick={函数的定义}
     * 
     *     jsx中的事件对象：是经过react包装处理后的事件对象，原生的事件对象存储在了 navtiveEvent属性上
     *                      jsx事件对象更好用，因为react已经帮我们做完了兼容性的处理
     * 
     *     jsx中的事件回调函数，是window调用的，但react中是严格模式，所以，this指向undefined
     * 
     *     jsx中的 onChange事件，就是原生dom事件中的 oninput事件
     */
    function btnFn(){
        console.log('this: ',this)
        console.log('btnfn')
    }
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    root.render((
        <div>
            <a href="http://baidu.com" onClick={(e)=>{
                console.log('a click')
                // 阻止默认行为：
                e.preventDefault(); // 支持，可以阻止默认行为
                // return false; 不支持，阻止不了默认行为

                console.log('e',e)

                //this 值为undefined，说明两件事
                // 1. react中事件回调的this 是指向window的。
                // 2. react中默认使用的是严格模式，所以, this不是window 而是 undefined

                console.log('this: ',this) // this 值为undefined
            
            }} >百度</a><br/>
            <button onClick={btnFn}>点我1</button> <br/>

            <input type="text" name="" id="" onChange={(e)=>{
                // react中的onChange事件，不是失去焦点的时候触发的。输入就触发。
                console.log('input value: ',e.target.value)

                console.log('onchange e: ', e) // InputEvent,是原生的 oninput的事件对象
            }}/>
        </div>
    ))
</script>
</html>

2-7. jsx综合案例练习

需求：实现评论列表功能

如果有评论数据，就展示列表结构 li（列表渲染）要包含a标签

name 表示评论人，渲染 h3

content 表示评论内容，渲染 p

如果没有评论数据，就展示一个 h1 标签，内容为：暂无评论！

用户名的字体25px, 内容的字体20px

点击内容区域提示它发表的时间
const list = [
  { id: 1, name: 'jack', content: 'rose, you jump i jump', time: '03:21' },
  { id: 2, name: 'rose', content: 'jack, you see you, one day day', time: '03:22' },
  { id: 3, name: 'tom', content: 'jack,。。。。。', time: '03:23' }
]

const list = [
    { id: 1, name: 'jack', content: 'rose, you jump i jump', time: '03:21' },
    { id: 2, name: 'rose', content: 'jack, you see you, one day day', time: '03:22' },
    { id: 3, name: 'tom', content: 'jack,。。。。。', time: '03:23' }
]
const root = ReactDOM.createRoot(document.querySelector("#root"));
function fn(item){
    alert(item.time)
}
let vdom = (
    list.length === 0 ? <h1>暂无评论</h1> : (
        <ul>
            {list.map(item=>(
                <li key={item.id}>
                    <a href="http://baidu.com" onClick={e=>e.preventDefault()}>
                        <h3 style={{fontSize:25}}>{item.name}</h3>
                        <p className="c1" onClick={()=>fn(item)}>{item.content}</p>
                    </a>
                </li>
            ))}
        </ul>
    )
)
root.render((
    <div>
        {vdom}
    </div>
))

2-8. jsx 中的三种注释方式

多行注释 {/* */}
单行注释
{
    //
}
属性注释 /* */

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render((
    <div>
        {/* 1. 多行注释 【推荐】*/}

        {/*
                中间都是注释的内容


            */}

        {/* 2. 单行注释 [一般不用]*/}

        {
            // 单行注释代码
            // 仅我可见as
        }

        {/*3. 属性注释*/}
        <button className="c1" /*id="box"*/  >按钮</button>
    </div>
))

2-9. 文档碎片

React.Fragment

react元素必须有唯一的根节点，但会导致多一层html标签结构，如果你希望直接渲染子几点到页面中，就可以使用文档碎片。将多个子节点放入文档碎片中。让文档碎片充当唯一的根节点。在渲染成真实dom时，文档碎片不被渲染，只渲染它内部的内容

const root = ReactDOM.createRoot(document.querySelector("#root"));
const { Fragment } = React
const vdom = (
    // 写法一
    // <React.Fragment>
    //     <div>
    //         我是div1
    //     </div>
    //     <div>
    //         我是div2
    //     </div>
    // </React.Fragment>

    // 写法二：
    // <Fragment>
    //     <div>
    //         我是div1
    //     </div>
    //     <div>
    //         我是div2
    //     </div>
    // </Fragment>

    // 写法三：
    <>
        <div>
            我是div1
        </div>
        <div>
            我是div2
        </div>
    </>
)
root.render(vdom)

3. react脚手架

create-react-app

作用：快速构建一个工程化的react开发环境

3-1. 使用脚手架搭建项目

3-1-1. 全局安装脚手架

# 方式一： 使用npm安装
npm i create-react-app -g  # 就会多一个命令  create-react-app 的命令
# 方式二： 使用yarn安装 [了解]
yarn add create-react-app global

3-1-2. 使用脚手架创建react项目

# npm [课堂使用] 
create-react-app 项目名 # 项目名不要叫 react， 不要有中文

# yarn [了解]
yarn create react-app 项目名

3-1-3. 运行项目

# npm 
cd 项目名  # 进入项目的根目录
npm start

# yarn
cd 项目名
yarn start

3-1-4. 常见yarn命令

# 初始化项目
yarn init 
# 安装
yarn add 包名
yarn add 包名 global 
# 删除包
yarn remove 包名
yarn reomve global 包名
# 运行
yarn start
# 通过git clone 项目后，是没有 node_modules目录的，安装依赖包
yarn

3-1-5. yarn 项目和 npm项目如何区分？

yarn 项目的版本锁文件： yarn.lock

npm 项目的版本锁文件: package-lock.json

3-2. 脚手架项目目录分析

在这里插入图片描述

react_study
   |- node_modules                                       项目根目录
   |- public                                    网站静态资源目录
   |    |- favicon.ico                          站点图标
   |    |- index.html							网站入口html文件
   |    |- logo192.png 							manifest.json要用的移动端图标
   |    |- logo512.png							manifest.json要用的移动端图标
   |    |- manifest.json						移动端的配置文件
   |    |- robots.txt							可以爬取网站哪些内容
   |-src										源码开发目录
   |  |- App.css								App根组件样式文件
   |  |- App.js									App根组件
   |  |- App.test.js							测试文件
   |  |- index.css								全局公共样式文件
   |  |- index.js								js的入口文件
   |  |- logo.svg								项目启动后旋转的react图标
   |  |- reportWebVitals.js						google的一个报告文件
   |  |- setupTests.js							测试启动文件
   |- .gitignore								git忽略文件
   |- package-lock.json							npm依赖包锁文件
   |- package.json								npm的配置文件
   |- README.md									项目说明文件

3-3. 脚手架目录精简

public目录只保留：favicon.ico、index.html

src目录： App.js[根组件]、index.js 【js入口文件】

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/App.js

export default function App(){
    return (
        <div>App12312312</div>
    )
}

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'

// 导入App组件
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App/>)

3-4. react18 和 17 版本写法区别

// react 17 语法

//import React from 'react'
// 差别一：ReactDOM 引入的包名不一样
//import ReactDOM from 'react-dom'

//import App from './App'
// 差别二：无序创建root 使用ReactDOM直接render
//ReactDOM.render(<App/>, document.getElementById('root'))


// react 18 版本
import React from 'react'
import ReactDOM from 'react-dom/client'

// // 导入App组件
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App/>)

4. 组件

什么是组件？

组成页面整体的部件，称为组件。

一个页面：由若干的组件组成

具有独立html结构、css样式、js逻辑、一些静态资源

react中的组件有两种：

类组件：react16.4版本以前，开发主要使用类组件

函数组件：react16.4版本以后，主要使用函数组件

组件开发优势：

方便复用

多人协作开发

4-1. 类组件

一、类组件定义：

类组件使用class进行声明定义

类组件要继承 React.Component 类

类组件的类名就是组件名

类组件类名首字母必须大写

类组件，必须有render方法

render方法执行后，必须要有返回值，返回值是什么，调用组件后渲染的内容就是什么。

99.999% 返回值都是一个react元素

二、类组件的调用

组件使用jsx语法进行调用

1-1.单标签：<组件名 />

1-2.对标签：<组件名></组件名>

类组件被调用，是如何执行的

当遇到时，首先会实例化该组件 new App()

使用实例化出来的对象，调用 render方法

将render方法 return 的内容，替换掉调用标签

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'

// // 导入App组件
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App/>)

src/App.jsx

import React,{Component} from 'react'
export default class App extends Component{
    render(){
        console.log(this)
        return (
            <div>App - class</div>
        )
    }
}

4-2. 函数组件

一、函数组件的定义

函数组件就是一个函数

函数名就是组件名

函数名首字母必须大写【因为组件在调用的时候，是使用jsx语法调用的】

函数的返回值，就是组件渲染的结果

二、函数组件的调用

<组件名/> 调用该组件，就是执行组件函数

函数的返回值，就是渲染的结果，替换掉调用标签

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'

// // 导入App组件
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App/>)

src/App.jsx

function App(){
    return (
        <div>App - function</div>
    )
}
export default App

4-3. 函数组件和类组件的区别

调用后执行的方式不同

类组件：实例化类之后，执行render函数

函数组件：直接调用执行函数

this指向不同

类组件有this： this指向当前组件的实例对象

函数组件this：没有this，this是undefined

是否有自身的状态数据：

类组件：有自身的状态数据 state

函数组件：本身没有状态数据，后期可以通过 hook函数具有状态数据

是否有生命周期：

类组件：有生命周期

函数组件：本身没有生命周期，后期可以通过hook函数模拟生命周期

4-4. 类组件的状态数据

创建状态数据

创建类的属性 state: 在构造函数中创建
constructor(){
    // 因为App继承了 Component,所以首先要调用父类的构造函数
    super()
    // 定义自身的属性
    // state属性是特殊的，状态数据的属性，值一般是一个对象，对象中的属性就是状态数据
    this.state = {
        count:10,
        msg:'atguigu'
    }
    // 构造函数，都是类的实例调用的，所以此处的this永远指向组件的实例对象
}
读取：

直接读取： {this.state.count}

解构之后读取:
let {count,msg} = this.state
{count}
{msg}
改变状态

前提：事件的回调函数中的this必须要指向当前组件的实例对象[ 箭头函数 ]
直接赋值： this.state.count += 1

问题：可以改变状态count的值，但是不能触发render方法的重新调用，页面看不到最新的结果
通过setState函数设置：
this.setState({
    count:this.state.count + 1
})
改变状态count ，并且会触发render方法的重新调用，页面可以看到改变后的数据

class App extends Component{
    // 在构造函数中，[类的状态数据] 就是定义该类的 state属性
    constructor(){
        // 因为App继承了 Component,所以首先要调用父类的构造函数
        super()
        // 定义自身的属性
        // state属性是特殊的，状态数据的属性，值一般是一个对象，对象中的属性就是状态数据
        this.state = {
            count:10,
            msg:'atguigu'
        }
        // 构造函数，都是类的实例调用的，所以此处的this永远指向组件的实例对象
    }


    render(){
        console.log('render执行了')
        // 可以解构之后在读取
        let {count, msg} = this.state
        return (
            <div> 
                <h3>class App</h3>
                <p>count: {this.state.count}</p>
                <p>msg: {msg}</p>
                <p><button onClick={function(){
                            console.log('this: ', this) // undefined  说明是window调用的
                        }}>事件回调函数是window调用的</button></p>
                <p>
                    <button onClick={()=>{
                            console.log('this: ', this)
                        }}>箭头函数this指向当前组件实例</button>
                </p>

                <p>
                    <button onClick={()=>{
                            // 直接给state赋值，可以改变状态数据，但是不会触发页面重新渲染
                            // 所以，看不到改变后的结果
                            this.state.count += 1
                            console.log(this.state.count)
                        }}>count+1 数据改变了但不重新渲染</button>
                </p>
                <p>
                    <button onClick={()=>{
                            // 改变状态数据，并触发render重新渲染.可以看到更新后的结果
                            this.setState({
                                count:this.state.count + 1
                            })
                        }}>count+1 数据变，页面也变</button>
                </p>
            </div>
        )
    }
}

4-5. 类组件状态定义的三种方式

constructor 构造函数中定义

state直接赋值定义【相当于也是在constructor中执行的，只不过执行时机比constructor要早】

混合定义

class App extends Component{
    // 1. 方式一：constructor中定义
    // constructor(){
    //     super()
    //     this.state = {
    //         count:1
    //     }
    // }
    // 2. 方式二： 直接赋值state定义 [推荐]
    // 直接赋值相当于是在 constructor中调用的。
    state = {
        count:1
    }
    // 3. 方式三：混合定义[了解]
    // constructor(){
    //     super()
    //     // 后执行，可以给state增加属性
    //     // 直接赋值，可以改变状态数据，并且不会触发render中心执行
    //     this.state.msg = 'atguigu'
    // }
    // state = {
    //     count:1
    // }

    render(){
        return (
            <div>
                <p>count:{this.state.count}</p>
                {/* <p>msg:{this.state.msg}</p> */}
                <p><button onClick={()=>{
                            this.setState({
                                count:this.state.count + 1
                            })
                        }}>count+1</button></p>
            </div>
        )
    }
}

4-6. 父子组件

组件的嵌套：在一个组件中调用另一个组件，就形成了组件的嵌套

组件嵌套会产生父子组件的概念：

外部组件是内部组件的父组件

内部组件是外部组件的子组件

App.jsx

 import React, { Component } from 'react'

// 导入Child组件
import Child from './components/Child'
/**
 * 在一个组件中，调用另一组件，组件就形成了嵌套关系
 * 外部组件称为内部组件的父组件
 * 内部组件是外部组件的子组件
 */
export default class App extends Component {
    render() {
        return (
            <div>
                <h3>App组件</h3>
                <hr />
                <Child/>
            </div>
        )
    }
}

src/components/Child.jsx

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                <h4>Child</h4>
            </div>
        )
    }
}

4-7. 组件通信

4-7-1. 父传子-props

4-7-1. 类组件

4-7-1-1. props-静态数据

props通信：

数据的传递：在父组件中通过给子组件绑定属性的方式传递数据

数据接收：在子组件中通过this.props 特殊属性，接收到父组件传递过来的数据

父组件： App.jsx

import Child from './components/Child'
export default class App extends Component {
    render() {
        return (
            <div>
                <h3>App组件</h3>
                <hr />
                {/*通过属性传递数据给子组件*/}
                <Child username='atguigu' age={10}/>
            </div>
        )
    }
}

子组件：src/components/Child.jsx

import React, { Component } from 'react'
export default class Child extends Component {
    render() {
        console.log('child: ',this.props)
        let {username, age} = this.props
        return (
            <div>
                <h4>Child</h4>
                <p>props username: {this.props.username} - {username}</p>
                <p>props age: {this.props.age}- {age}</p>
                
            </div>
        )
    }
}

4-7-1-2. props- 状态数据

父组件向子组件传递状态数据

传递方式：调用子组件的标签，通过属性传递

逐个属性单独赋值传递

通过...扩展运算批量传递

接收方式: 子组件中通过 this.props特殊属性接收

App.jsx

import React, { Component } from 'react'

// 导入Child组件
import Child from './components/Child'
/**
 * 传递父组件的状态数据给子组件
 */
export default class App extends Component {
    // 定义状态
    state = {
        num:1000,
        message:'hello, 各位大哥，别迟到了！'
    }
    render() {
        // 解构状态数据
        let {num, message} = this.state
        return (
            <div>
                <h3>App组件</h3>
                <hr />
                <h4>子组件中接收数据，取决于属性名，而不是变量名</h4>
                <Child username='atguigu' age={10} num={num} message={message}/>
                <hr />
                <Child username='尚硅谷' age={100} num={num} message={message}/>
                <hr />
                <h4>通过扩展运算... 批量传递状态数据</h4>
                <Child username='批量传递数据' age={300} {...this.state}  />
                
            </div>
        )
    }
}

src/components/Child.jsx

import React, { Component } from 'react'
export default class Child extends Component {
    render() {
        console.log('child: ',this.props)
        let {username, age, num, message} = this.props
        return (
            <div>
                <h4>Child</h4>
                <p>props username: {this.props.username} - {username}</p>
                <p>props age: {this.props.age}- {age}</p>
                
                <p>App state count: {num}</p>
                <p>App state msg: {message}</p>
            </div>
        )
    }
}

4-7-2. 函数组件

函数组件接收外部数据，是通过函数参数接收。一般直接在参数位置进行解构

Child.jsx

/**
 * 函数组件如何接收外部数据？
 * @ props: 函数组件第一个参数，就是外部数据
   参数直接结构：推荐写法
 * @returns 
 */
export default function Child({num, message, age}){
    return (
        <div>
            <h3>Child 函数组件</h3>
            <p>app num: {num}</p>
            <p>app message: {message}</p>
            <p>app age: {age}</p>
            
        </div>
    )
}

// 如何获取和使用外部数据【不推荐】
// export default function Child(props){
//     console.log('props: ',props)
//     let {num, message, age} = props
//     return (
//         <div>
//             <h3>Child 函数组件</h3>
//             <p>app num: {props.num}</p>
//             <p>app message: {props.message}</p>
//             <hr />
//             <p>app num: {num}</p>
//             <p>app age: {age}</p>
//             <p>app message: {message}</p>
//         </div>
//     )
// }

4-7-2. 子传父-props

父组件通过props传递一个方法给子组件

步骤：

在父组件中定义一个方法

将该方法通过标签属性的方式，传递给子组件

改变this指向之后，在传递，确保函数内部的this指向父组件的实例对象

因为，接收到数据之后，我们一般会改变父组件的状态

子组件通过props接收

子组件中调用该方法，并将要传递的数据以参数的形式给父组件

App.jsx

import Child from './components/Child'
export default class App extends Component {
    // 定义状态
    state = {
        num:1000,
        message:'hello, 各位大哥，别迟到了！'
    }

    // 1. 在父组件中定义一个方法
    getSonData(a){
        console.log('App a:',a)
        // getSonData是普通函数，this指向取决于调用者是谁
        console.log('getSonData this', this)

        // 我想改变状态数据，就必须让this指向当前组件的实例对象
        // 怎么改变 getSonData函数中的this指向？
        this.setState({
            num: this.state.num + a
        })
    }
    render() {
        let {num,message} = this.state
        return (
            <div>
                <h2>App父组件</h2>
                {/* 2. 通过标签属性，传递方法 */}
                <Child getSonData={this.getSonData.bind(this)} age={10} num={num} message={message}/>
            </div>
        )
    }
}

src/components/Child.jsx [子组件是函数组件]

/**
 * 函数组件如何接收外部数据？
 * @ props: 函数组件第一个参数，就是外部数据
 * @returns 
 */
// 3. 在子组件中通过props接收从父组件传递过来的 getSonData 方法
export default function Child({ num, message, age, getSonData }) {

    return (
        <div>
            <h3>Child 函数组件</h3>
            <p>app num: {num}</p>
            <p>app message: {message}</p>
            <p>app age: {age}</p>
            <p><button onClick={()=>{
                getSonData(20000)
            }}>点击传递数据给父组件</button></p>
        </div>
    )
}

src/components/Child.jsx [子组件是类组件]

import {Component} from 'react'
export default class Child extends Component {
    
    render(){
        let {num, message, age, getSonData} = this.props
        return (
            <div>
                <h3>Child 类组件</h3>
                <p>app num: {num}</p>
                <p>app message: {message}</p>
                <p>app age: {age}</p>
                <p><button onClick={()=>{
                    getSonData(20000)
                }}>点击传递数据给父组件</button></p>
            </div>
        )
    }
}

4-7-3. props数据是只读的不能修改

外部传入的数据props是只读的，在子组件中不可以直接赋值修改

如果想改，需要到数据的来源，父组件中修改。需要用到子传父的知识点

App.jsx

import React, { Component } from 'react'
import Child from './components/Child'

export default class App extends Component {
    state = {
        count:1
    }
    // 1. 定义方法
    setCount(num){
        this.setState({
            count:this.state.count + num
        })
    }
    render() {
        let {count} = this.state
        return (
            <div>
                <h3>App</h3>
                {/* 2. 改变this指向后，将方法给子组件 */}
                <Child count={count} setCount={this.setCount.bind(this)}/>
            </div>
        )
    }
}

src/components/Child.jsx

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        let {setCount} = this.props
        return (
            <div>
                <h4>Child</h4>
                <p>app count props: {this.props.count}</p>
                <p><button onClick={()=>{
                    this.props.count += 100  
                    //  Cannot assign to read only property 'count' of object '#<Object>
                    // 不能给只读属性count 赋值
                    // props数据是只读的，只能读，不能改
                }}>改变props count</button></p>

                <p><button onClick={()=>{
                    setCount(5)
                }}>改父组件的数据</button></p>
            </div>
        )
    }
}

4-7-4. `props.children`

props.children : 可以获取到对标签调用组件时，对标签中间的内容

这也是单标签和对标签调用组件的差别

<组件名 />

<组件名>内容会被props.children接收到</组件名>

App.jsx

import React, { Component } from 'react'
import Button from './components/Button'
export default class App extends Component {
    render() {
        return (
            <div>
                <h3>App</h3>
                <Button username='atguigu'>保存</Button>
                <Button>删除</Button>
            </div>
        )
    }
}

src/components/Button.jsx

import React from 'react'

export default function Button(props) {
    console.log('props: ',props)
    return (
        <button>{props.children}</button>
    )
}

4-7-5. props校验及默认值

可以使用prop-types 包，来对外部传入的数据类型和默认值进行限定

类组件：

static propTypes: 限定类型和是否必填

static defaultProps: 限定默认值

函数组件：

函数名.propTypes: 限定类型和是否必填

函数名.defaultProps: 限定默认值

类组件

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class PropsClass extends Component {
    // 定义校验规则
    // isRequired 必填
    static propTypes = {
        name:PropTypes.string.isRequired,
        age:PropTypes.number
    }
    // 设置默认值
    static defaultProps = {
        age:10000
    }
    render() {
        return (
            <div>
                <h3>类组件props测试</h3>
                <p>name: {this.props.name}</p>
                <p>age: {this.props.age}</p>
            </div>
        )
    }
}

函数组件

import React from 'react'
import PropTypes from 'prop-types'
export default function PropsFun({name,age}) {
    return (
        <div>
            <h3>函数组件props限定</h3>
            <p>name: {name}</p>
            <p>age: {age}</p>
        </div>
    )
}
//校验规则
PropsFun.propTypes = {
    name:PropTypes.string.isRequired,
    age:PropTypes.number
}
// 默认值
PropsFun.defaultProps = {
    age:900
}

4-8. 类组件中事件回调this指向问题

事件回调的函数，都是window调用的

有三种方案，使得事件回调的this指向当前组件的实例

包裹箭头函数【推荐】

可以传参

方法是定义在原型上的

bind【推荐】

可以传参

方法是定义在原型上的

父子组件通信时，传递给子组件的方法推荐用bind

直接定义成箭头函数【不推荐】

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count:1
    }
    click1(num){
        // 普通方法，this只跟调用者有关。
        // click1 作为单击事件回调的函数，调用者是window，因为是严格模式，所以是undefined
        console.log('click1: ',this)
        this.setState({
            count: this.state.count + num
        })
    }

    click2(num){
        console.log('click2 this: ', this)
        this.setState({
            count:this.state.count + num
        })
    }

    click3(num){
        console.log('click3 this: ', this)
        this.setState({
            count:this.state.count + num
        })
    }

    click4 = (num)=>{
        console.log('click4 this: ', this)
        this.setState({
            count:this.state.count + num
        })
    }
    render() {
        // render中的this永远指向当前组件的实例对象
        return (
            <div>
                <h3>App</h3>
                <p>count: {this.state.count}</p>
                <p><button onClick={this.click1}>有问题的this</button></p>

                <p><button onClick={()=>{
                            // 箭头函数没有自己的this，使用的是上级作用域的this，render中的this是向前实例
                            this.click2(5)
                        }}>包裹箭头函数的this - 1</button></p>
                {/*
                    包裹箭头函数：
                    优点： 1，函数是定义在类的原型对象上的。共用一个
                           2. 可以传递参数
                */}

                <p><button onClick={()=>this.click2(8)}>包裹箭头函数的this - 2 -简写形式</button></p>
                {/* 
                    bind会返回一个新函数，新函数的this已经被改变了，用的也是render中的this 
                    优点：1. 函数是定义在类的原型对象上的。共用一个
                          2. 可以传参
                          3. 返回一个新函数，this指向已经改变了的。传递给子组件时，非常方便
                */}
                <p><button onClick={this.click3.bind(this,10)}>bind处理的this</button></p>

                {/* 
                    click4 中的this 用的是constructor中的this. 
                    缺点：1. 不能传参
                          2. 箭头函数不是定义在原型对象上的，每一个实例都有一个自己的。性能也不好
                */}
                <p><button onClick={this.click4}>直接定义箭头函数的this</button></p>
            </div>
        )
    }
}

4-9. `setState`深入理解

this.setState 用来改变状态数据。是异步的改变

用法：
参数是一个对象：this.setState({count:1})
参数是一个回调函数：

回调函数：是异步的

回调函数的参数，是最新的改变后的状态数据

回调函数的返回值，是最新的状态数据
this.setState(state=>{
    return {
        count:state.count + 1
    }
})

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 1,
        msg:'atguigu'
    }
    render() {
        console.log('render 执行了')
        return (
            <div>
                <p>count: {this.state.count}</p>
                <p >
                    <button onClick={() => {
                            console.log('11111')
                            // setState是异步执行的,所以结果每次只能+1
                            this.setState({
                                count: this.state.count + 1
                            })
                            this.setState({
                                count: this.state.count + 1
                            })
                            this.setState({
                                count: this.state.count + 1
                            })
                            this.setState({
                                count: this.state.count + 1
                            })
                            console.log('22222')
                        }}>count ++</button>

                </p>

                <p><button onClick={()=>{
                            // setState 参数可以是一个回调函数，该回调函数是异步的
                            // 回调函数的参数，就是当前组件的状态数据【最新的状态】
                            // 回调函数的返回值，就是改变后的最新的状态值
                            console.log('1111')
                            this.setState((state)=>{
                                return {
                                    count: state.count + 1
                                }
                            })
                            this.setState((state)=>{
                                return {
                                    count: state.count + 1
                                }
                            })
                            this.setState((state)=>{
                                return {
                                    count: state.count + 1
                                }
                            })
                            console.log('2222')
                        }}>setState 接收一个函数作为参数</button></p>
            </div>
        )
    }
}

4-10. 开发时的组件目录结构

在这里插入图片描述

4-11. react css 样式

4-11-1. css 样式引入的位置

成熟的第三方库：

文件放置位置： 项目目录/public/css/xxxx.css

引入的方式：项目目录/public/index.html head中通过link标签引入

自定义的全局样式：

文件放置位置： src/App.css

引入位置：src/App.jsx 中通过import 语法引入

组件独有样式：

文件放置位置：组件目录/css/xxx.css

引入位置：组件中使用 import 语法引入

成熟第三方库
自定义全局通用样式

在这里插入图片描述

组件独有样式

在这里插入图片描述

4-11-2. css 模块化

css in js

将css文件样式转化为js模块来使用，好处是避免不同的组件的相同的样式名的冲突

确保各个组件样式的独立性

实现模块化步骤：

命名：css文件必须以 xxx.module.css 命名

引入： import styles from './xxxx.module.css'

使用：styles.类名

在这里插入图片描述

4-12. 图片

4-12-1. 网络图片

直接将图片路径填到 img src属性即可

4-12-2. 本地图片

require

注意：静态资源的目录，必须放在src目录下面。

import

import React, { Component } from 'react'
import img from './assets/images/2.webp'
export default class App extends Component {
    render() {
        return (
            <div>
                <h3>图片</h3>
                <h5>网络图片</h5>
                <img width={500} src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ed5b4c0f1853e63df778a7f6699830ea.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="" />
                <h5>本地图片</h5>
                
                <img width={600} src={require("./assets/images/1.webp")} alt="" /><br/>
                <img width={700} src={img} alt="" />
            </div>
        )
    }
}

4-13. 练习

完成组件拆分

完成静态布局

首屏数据渲染

完成交互

4-13-1. 轮播图练习

Swipper.jsx

import React, { Component } from 'react'
import './css/index.css'
export default class Swipper extends Component {
    state = {
        index:4
    }
    render() {
        let {index} = this.state
        return (
            <div className="wrapper">
                <img src={require(`./images/${index}.webp`)} alt="" />
                <span onClick={()=>{
                    index--;
                    if(index <=0 ) index = 4;
                    this.setState({
                        index
                    })
                }}> &lt; </span>
                <span onClick={()=>{
                    index++;
                    if(index >=5 ) index = 1
                    this.setState({
                        index
                    })
                }} className="right"> &gt; </span>
            </div>
        )
    }
}

css

.wrapper{
    position: relative;
    width:600px;
    height:240px;
    border:1px solid red;
    
}
.wrapper span{
    position: absolute;
    top:90px;
    
    height:60px;
    width:24px;
    background-color:forestgreen;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    user-select: none;
    color:white;
    font-weight: 700;
}
.wrapper .right {
    right: 0;
}
.wrapper img{
    position:absolute;
    top:0;
    left:0;
    height:240px;
    width:600px;
}

4-13-2. tab切换练习

Tab.jsx

import React, { Component } from 'react'
import './index.css'
export default class Tab extends Component {
    state = {
        index:1
    }
    render() {
        let {index} = this.state
        return (
            <div>
                <h3>Tab</h3>
                <div className="box">
                    <button onClick={()=>{
                        this.setState({
                            index:1
                        })
                    }} className={index === 1 ? 'active' : ''}>北京</button>
                    <button onClick={()=>{
                        this.setState({
                            index:2
                        })
                    }}  className={index === 2 ? 'active' : ''}>上海</button>
                    <button onClick={()=>{
                        this.setState({
                            index:3
                        })
                    }}  className={index === 3 ? 'active' : ''}>深圳</button>
                    
                    <div className="show" style={{display:index===1 ? 'block':'none'}}>北京</div>
                    <div className="show" style={{display:index===2 ? 'block':'none'}}>上海</div>
                    <div className="show" style={{display:index===3 ? 'block':'none'}}>深圳</div>
                </div>

            </div>
        )
    }
}

index.css

.box{
    width:500px;
    height:300px;
    border:1px solid red;
}

.box .show{
    width:100%;
    height:240px;
    border:1px solid blue;
    display: none;
}

.box button{
    margin-right: 10px;
}
.box .active{
    background-color: aqua;
}

4-14. 类组件的生命周期

4-14-1. 挂载阶段

执行顺序：constructor=> render => componentDidMount

constructor、componentDidMount 只执行一次，挂载后不在重复执行

render: 挂载阶段执行，更新也会执行

componentDidMount 一般会做如下操作

开启定时器

发送ajax请求

订阅消息

添加事件监听

存在父子组件嵌套时

先执行父组件的 constructor、render

执行子组件的 constructor、render、componentDidMount

执行父组件的 componentDidMount

4-14-2. 更新阶段

执行顺序： render ==> componentDidUpdate

什么方式可以触发更新？

new props： props数据发生变化时

setState: 重新设置状态数据时

forceUpdate: 强制更新

componentDidUpdate 【不常用】

发送ajax请求

将数据做本地化存储

对于组件来说，父组件更新了[render]，子组件无条件也会 render

4-14-2-1. `shouldComponentUpdate`【了解】

问题：类组件当外部数据重新设置，即便没有变化也会重新渲染，当状态数据重新设置，即便没有变化，也会重新渲染

作用：可以控制组件的render是否执行。可以实现：当组件中的props和state数据都没有变化的时候，不重新渲染

should 应该 component 组件 update更新：组件应该更新么？

nextProps: 即将要更新到的props值

nextState：即将要更新到的 state值

return boolean： true 组件更新、false组件不更新

shouldComponentUpdate(nextProps, nextState){
    // console.log('this.props: ',this.props)
    // console.log('nextProps',nextProps)
    // console.log('this.state: ', this.state)
    // console.log('nextState',nextState)
    // return true

    // 外部传入的数据props有变化才重新渲染
    for(let attr in nextProps){
        // 最新的外部数据和当前的数据进行比对
        if(nextProps[attr] !== this.props[attr]){
            // 有一个不一样的就返回true，重新render
            return true
        }
    }
    for(let attr in nextState){
        if(nextState[attr] !== this.state[attr]){
            return true
        }
    }
    return false
}

4-14-2-2. `PureComponent` 纯组件

作用：当组件中的props和state数据都没有变化的时候，组件不重新render

4-14-3. 卸载阶段

componentWillUnmount : 组件即将卸载前执行

清除定时器

取消订阅

解绑事件监听

4-15. ref

ref作用：在react组件中可以通过绑定ref，来获取原生的dom元素

ref='字符串'

ref=回调函数

ref=React.createRef()

import React, { Component, createRef } from 'react'

export default class App extends Component {
    pwdRef = createRef()
    
    render() {
        return (
            <>
                <div>App</div>
                {/* 方式一[不推荐]  ref=字符串 */}
                <input type="text" name="" id="" ref='username'/><br />

                {/* 方式二[不推荐]：ref=回调函数 弊端：写法太麻烦 */}
                <input type="text" name="" id="" ref={(el)=>{
                    console.log('el', el)
                    this.inputRef = el
                }}/>

                {/* 方式三[推荐]：React.createRef() */}
                <input type="text" name="" ref={this.pwdRef} id="" />

                <p><button onClick={()=>{
                    // 方式一[不推荐]：当前组件实例对象身上会多一个 refs属性
                    console.log(this.refs.username, this.refs.username.value)
                    // 方式二： 
                    console.log(this.inputRef, this.inputRef.value)

                    // 方式三：
                    console.log('createRef: ',this.pwdRef.current, this.pwdRef.current.value)
                }}>获取原生dom元素</button></p>
            </>
        )
    }
}

4-15-1. 受控组件

受控组件、非受控组件，说的都是表单元素

受控组件：表单元素的值，受到组件状态[state]的控制

  1. 给表单元素绑定 value，值是 状态数据state
  1. 绑定`onChange`回调函数，回调函数内部给state重新赋值
  1. 获取受控组件的表单数据：读取状态数据state即可。(表单数据和state已经<font color='red'>双向数据绑定</font>了)

import React, { Component } from 'react'
/**
 * react中研究表单
 * 1. 状态数据如何渲染到表单元素身上
 * 2. 如果获取最新的表单数据
 * 
 */
export default class FormControl extends Component {
    submitHandler(e) {
        // 阻止默认提交行为
        e.preventDefault()
        console.log('表单数据提交了')
        console.log('username:', this.state.username)
        console.log('pwd:', this.state.pwd)
        console.log('sex:', this.state.sex)
        console.log('city:', this.state.city)
        console.log('hobby:', this.state.hobby)
    }
    state = {
        username: 'atguigu',
        pwd: '123123',
        sex: "0", // 1 男 0 女
        city: "2",
        hobby: ["1"]
    }
    // usernameChange(e){
    //     console.log('username:', e.target.name)  // username
    //     this.setState({
    //         [e.target.name]:e.target.value
    //     })
    // }
    // pwdChange(e){
    //     console.log('pwd:', e.target.name) // pwd
    //     this.setState({
    //         [e.target.name]:e.target.value
    //     })
    // }
    // sexChange(e){
    //     console.log('sex: ', e.target.name) // sex
    //     this.setState({
    //         [e.target.name]:e.target.value
    //     })
    // }

    changeHandler(e) {
        let value = e.target.value
        if(e.target.type === 'checkbox'){
            let index = this.state[e.target.name].findIndex(item =>item === e.target.value)
            value = [...this.state[e.target.name]]
            if(index === -1) value.push(e.target.value)
            else value.splice(index,1)
        }
        this.setState({
            [e.target.name]: value
        })
    }
    render() {
        let { username, pwd, sex, city, hobby } = this.state
        return (
            <div>
                <form action="" onSubmit={this.submitHandler.bind(this)}>
                    <p>姓名：<input type="text" name="username" value={username} onChange={this.changeHandler.bind(this)} /></p>
                    <p>密码：<input type="text" name="pwd" value={pwd} onChange={this.changeHandler.bind(this)} /></p>
                    <p>
                        性别：
                        <input type="radio" name="sex" value="1" checked={sex === "1" ? true : false} onChange={this.changeHandler.bind(this)} /> 男
                        <input type="radio" name="sex" value="0" checked={sex === "0" ? true : false} onChange={this.changeHandler.bind(this)} /> 女
                    </p>
                    <p>
                        城市：
                        <select name="city" value={city} onChange={this.changeHandler.bind(this)}>
                            <option value="1">北京</option>
                            <option value="2">石家庄</option>
                            <option value="3">保定</option>
                        </select>
                    </p>
                    <p>爱好：
                        <input type="checkbox" name="hobby" value="1" checked={hobby.includes("1")} onChange={this.changeHandler.bind(this)} /> 台球
                        <input type="checkbox" name="hobby" value="2" checked={hobby.includes("2")} onChange={this.changeHandler.bind(this)} /> 篮球
                        <input type="checkbox" name="hobby" value="3" checked={hobby.includes("3")} onChange={this.changeHandler.bind(this)} /> 足球
                        <input type="checkbox" name="hobby" value="4" checked={hobby.includes("4")} onChange={this.changeHandler.bind(this)} /> 滑雪
                    </p>
                    <p>
                        <button>提交</button>
                    </p>
                </form>
            </div>
        )
    }
}

4-15-2. 非受控组件

非受控组件：只实现了单项数据绑定[ 从状态数据到视图显示 ]

绑定数据渲染：defaultValue、defaultChecked

获取用户数据：

通过绑定ref的方式，通过真实dom元素，获取用户最新输入

就涉及到数组的常用方法 find filter map

受控组件：获取数据简单【state】，但是将用户输入改变state复杂 [changeHandler]

非受控组件：不需要写changeHandler。获取用户最新输入的值复杂[需要运用数组方法获取]

import React, { Component,createRef } from 'react'
/**
 * 非受控组件：
 * 
 * 1. 状态数据如何渲染到页面
 * 2. 如何收集用户输入的最新数据
 * 
 */
export default class FormOutControl extends Component {
    state = {
        username:'atguigu',
        pwd:999,
        sex:"1",
        city:"3",
        hobby:["2","3"]
    }
    usernameRef = createRef()
    pwdRef = createRef()
    sexRef = [createRef(), createRef()]
    cityRef = createRef()
    hobbyRef = [createRef(), createRef(), createRef(),createRef()]
    submitHandler(e){
        e.preventDefault()
        console.log('表单提交了')

        console.log('username: ', this.usernameRef.current.value.trim())
        console.log('pwd: ', this.pwdRef.current.value.trim())
        // 获取单选框用户最新输入
        console.log('sex: ', this.sexRef.filter(item=>item.current.checked)[0].current.value)
        console.log('sex: ', this.sexRef.find(item=>item.current.checked).current.value)
        console.log('city: ', this.cityRef.current.value)

        // 复选框
        console.log('hobby: ', this.hobbyRef)
        console.log('hobby: ', this.hobbyRef.filter(item=>item.current.checked))
        console.log('hobby: ', this.hobbyRef.filter(item=>item.current.checked).map(item=>item.current.value))

       
    }
    render() {
        let {username, pwd, sex, city, hobby} = this.state;
        return (
            <div>
                <form action="" onSubmit={this.submitHandler.bind(this)}>
                    <p>姓名：<input type="text" defaultValue={username} name="username"  ref={this.usernameRef}/></p>
                    <p>密码：<input type="text" defaultValue={pwd} name="pwd"  ref={this.pwdRef}/></p>
                    <p>
                        性别：
                        <input type="radio" name="sex" value="1"  defaultChecked={sex==="1"} ref={this.sexRef[0]}/> 男
                        <input type="radio" name="sex" value="0"  defaultChecked={sex==="0"} ref={this.sexRef[1]}/> 女
                    </p>
                    <p>
                        城市：
                        <select name="city" defaultValue={city} ref={this.cityRef}>
                            <option value="1">北京</option>
                            <option value="2">石家庄</option>
                            <option value="3">保定</option>
                        </select>
                    </p>
                    <p>爱好：
                        <input type="checkbox" name="hobby" value="1" ref={this.hobbyRef[0]}  defaultChecked={hobby.includes("1")}/> 台球
                        <input type="checkbox" name="hobby" value="2" ref={this.hobbyRef[1]}  defaultChecked={hobby.includes("2")}/> 篮球
                        <input type="checkbox" name="hobby" value="3" ref={this.hobbyRef[2]}  defaultChecked={hobby.includes("3")}/> 足球
                        <input type="checkbox" name="hobby" value="4" ref={this.hobbyRef[3]}  defaultChecked={hobby.includes("4")}/> 滑雪
                    </p>
                    <p>
                        <button>提交</button>
                    </p>
                </form>
            </div>
        )
    }
}

5. 组件化开发思路

编程思维：

组件化开发的开发思路：

拆分组件

组件化静态页面布局

首屏数据渲染

3-1. 需要什么样的状态数据？【数据结构】

3-2. 状态数据定义在哪个组件身上合适？

如果该数据只有一个组件使用，那么就放在这个组件身上

如果该数据需要多个组件使用，那么就放在他们共同的父级组件身上[状态提升]

为什么要状态提升？

因为多个组件需要同一个数据，就涉及到组件间通信，父子组件传递数据是最方便的

完成用户交互功能

用语言描述你要做什么

给描述的事情分步骤

给步骤罗列技术点

综合考量使用什么技术实现

react超详细讲解-看这一篇就够了(1)

1. React基础

1-1. react-调试插件安装

1-2. react 基本使用

1-3. 注意事项

1-4. 虚拟DOM

1-5. createElement 创建 react元素

1-5-1. 基本使用

1-5-2. 没有属性的元素标签，使用null 、undefined、{}占位

1-5-3. 特殊属性className

1-5-4. 创建复杂结构-元素嵌套-及其问题

2. jsx

2-1. jsx语法在html文件中解析

2-2. jsx基本使用

2-3. jsx标签注意事项

2-4. jsx中的插值表达式

2-4-1. 渲染值基本使用

2-4-2. 条件渲染

2-4-3. 插值表达式赋值属性

2-5. 样式处理

2-5-1. style 行内样式

2-5-2. className通过类名定义样式

2-6- 列表渲染

2-6. jsx中的事件

2-6-1. 原生dom事件

2-6-2. jsx中的事件

2-7. jsx综合案例练习

2-8. jsx 中的三种注释方式

2-9. 文档碎片

3. react脚手架

3-1. 使用脚手架搭建项目

3-1-1. 全局安装脚手架

3-1-2. 使用脚手架创建react项目

3-1-3. 运行项目

3-1-4. 常见yarn命令

3-1-5. yarn 项目和 npm项目如何区分？

3-2. 脚手架项目目录分析

3-3. 脚手架目录精简

3-4. react18 和 17 版本写法区别

4. 组件

4-1. 类组件

4-2. 函数组件

4-3. 函数组件和类组件的区别

4-4. 类组件的状态数据

4-5. 类组件状态定义的三种方式

4-6. 父子组件

4-7. 组件通信

4-7-1. 父传子-props

4-7-1. 类组件

4-7-1-1. props-静态数据

4-7-1-2. props- 状态数据

4-7-2. 函数组件

4-7-2. 子传父-props

4-7-3. props数据是只读的不能修改

4-7-4. props.children

4-7-5. props校验及默认值

4-8. 类组件中事件回调this指向问题

4-9. setState深入理解

4-10. 开发时的组件目录结构

4-11. react css 样式

4-11-1. css 样式引入的位置

4-11-2. css 模块化

4-12. 图片

4-12-1. 网络图片

4-12-2. 本地图片

4-13. 练习

4-13-1. 轮播图练习

4-13-2. tab切换练习

4-14. 类组件的生命周期

4-14-1. 挂载阶段

4-14-2. 更新阶段

4-14-2-1. shouldComponentUpdate【了解】

4-14-2-2. PureComponent 纯组件

4-14-3. 卸载阶段

4-15. ref

4-15-1. 受控组件

4-15-2. 非受控组件

5. 组件化开发思路

1-5. `createElement` 创建 react元素

1-5-3. 特殊属性`className`

2. `jsx`

2-3. `jsx`标签注意事项

2-5-2. `className`通过类名定义样式

4-7-4. `props.children`

4-9. `setState`深入理解

4-14-2-1. `shouldComponentUpdate`【了解】

4-14-2-2. `PureComponent` 纯组件