尚硅谷React学习笔记（上）

最新推荐文章于 2023-10-22 20:46:17 发布
最新推荐文章于 2023-10-22 20:46:17 发布
阅读量796 收藏 7
点赞数 3
分类专栏： # React 文章标签： react.js 学习 笔记 diffing算法 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38196449/article/details/131585448
版权

目录

一、React入门

1.1、React简介

为什么要学？

React的特点

1.2、React的基本使用

Hello React案例

创建虚拟DOM的两种方式

虚拟DOM与真实DOM

1.3、React JSX

语法规则

JSX小练习

1.4、模块与组件化的理解

模块

组件

模块化

组件化

二、React面向组件编程

2.1、基本理解和使用

使用React开发者工具调试（chrome浏览器）

2.2、函数式组件

2.3、类式组件

2.4、组件三大核心属性1: state

需求

问题：state存在哪里？

代码实现

state的简写方式

强烈注意

2.5、组件三大核心属性2: props

需求（props基本使用）

代码实现

批量传递props

对props进行限制

props简写方式

类式组件中的构造器与props

函数式组件使用props

2.6、组件三大核心属性3: refs

需求

字符串形式的ref

回调形式的ref

回调ref执行次数的问题

createRef的使用

2.7、React事件处理

2.8、收集表单数据

需求

非受控组件

受控组件

2.9、生命周期

需求

实现代码（引出生命周期）

生命周期流程图（旧版本）

生命周期流程图（新版本）

​编辑

2.10、虚拟DOM的diffing算法

面试题一：react/vue中的key有什么作用？key的内部原理是什么？

面试题二：为什么遍历列表时，key最好不要用index？

一、React入门

1.1、React简介

为什么要学？

（1）原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）。

因为各种document.getElementById('app')，代码量就很繁琐，而且各种操作DOM。

（2）使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。

（3）原生JavaScript没有组件化编码方案，代码复用率低。

React的特点

（1）采用组件化模式、声明式编码，提高开发复用率及组件复用率。

（2）在React Native中可以使用React语法进行移动端开发。

（3）使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

1.2、React的基本使用

Hello React案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建虚拟DOM
        const vdom = <h1>Hello，React</h1>
        //2、渲染虚拟DOM到页面
        ReactDOM.render(vdom,document.getElementById('test'))
    </script>
</body>
</html>

创建虚拟DOM的两种方式

（1）纯JS方式（一般不用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react_js</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>


    <script type="text/javascript">
        //1、创建虚拟DOM
        const vdom = React.createElement('h1',{id:'title'},'Hello，React')
        //2、渲染虚拟DOM到页面
        ReactDOM.render(vdom,document.getElementById('test'))
    </script>
</body>
</html>

注意：以js方式去实现，就不用引入babel脚本了，因为只有JSX的实现方式才用引入。

（2）JSX方式

虚拟DOM与真实DOM

我们先来分别打印一下虚拟DOM与真实DOM：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建虚拟DOM
        const vdom = (
            <h1 id="title">
                <span>Hello，React</span>
            </h1>
        )
        //2、渲染虚拟DOM到页面
        ReactDOM.render(vdom,document.getElementById('test'))
        console.log('虚拟DOM',vdom)
        console.log('真实DOM',document.getElementById('test'))
    </script>
</body>
</html>

关于虚拟DOM：

        1、本质是Object类型的对象（一般对象）

        2、虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多属性。 

        3、虚拟DOM最终会被React转换成真实DOM，呈现在页面上。

1.3、React JSX

语法规则

（1）标签中使用{}混入JS表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        const myId = 'atguigu'
        const myData = 'hello，react'

        //1、创建虚拟DOM
        const vdom = (
            <h2 id={myId}>
                <span>{myData}</span>
            </h2>
        )
        //2、渲染虚拟DOM到页面
        ReactDOM.render(vdom,document.getElementById('test'))


    </script>
</body>
</html>

（2）样式的类名指定不要用class，要用className。

（3）内联样式，要用style={{color:'white',fontSize:'29px'}}的形式去写。

JSX小练习

需求：动态展示如下列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx小练习</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //模拟一些数据
        const data = ['Angular','React','Vue']

        //1、创建虚拟DOM
        const vdom = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item,index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        //2、渲染虚拟DOM到页面
        ReactDOM.render(vdom,document.getElementById('test'))
    </script>
</body>
</html>

1.4、模块与组件化的理解

模块

（1）理解：一般就是一个.js文件。

（2）为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

（2）作用：复用编码，简化项目编码，提高运行效率。

组件

（1）理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)。比如现有一个index.js文件，里面有用户管理功能、部门管理功能、角色管理功能，模块的意思是，将三个功能拆开，用户管理放入user.js中，部门管理功能放入dept.js中，然后index.js只需引入即可。

（2）为什么要用组件： 一个界面的功能更复杂。

（3）作用：复用编码，简化项目编码，提高运行效率。

模块化

当应用的js都以模块来编写的，这个应用就是一个模块化的应用。

组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用。

二、React面向组件编程

2.1、基本理解和使用

使用React开发者工具调试（chrome浏览器）

这里想要资料的朋友私聊我！！！

打开我们之前写的jsx小练习代码，可以发现react插件图标是亮的。

打开控制台。

2.2、函数式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建函数式组件
        function MyComponent() {
            return <h2>我是用函数定义的组件</h2>
        }
        //2、渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    </script>
</body>
</html>

注意：

1、组件名必须首字母大写。
2、虚拟DOM元素只能有一个根元素。
3、虚拟DOM元素必须有结束标签。

问题：执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？

（1）React解析组件标签，找到了MyComponent组件。

（2）发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

2.3、类式组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类式组件</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class MyComponent extends React.Component {
            render() {
                return <h2>我是用类定义的组件</h2>
            }
        }
        //2、渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    </script>
</body>
</html>

问题：执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？

（1）React解析组件标签，找到了MyComponent组件。

（2）发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。

（3）将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

2.4、组件三大核心属性1: state

需求

问题：state存在哪里？

state存在于类的实例对象中。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state案例</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Weather extends React.Component {
            constructor(props){
                super(props)
                this.state = {isHot:true}
                //解决changeWeather中this指向问题
                this.changeWeather = this.changeWeather.bind(this)
            }
            render(){
                return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
            }
            changeWeather(){
                const isHot = this.state.isHot
                this.setState({isHot:!isHot})
            }
        }
        //2、渲染组件到页面
        ReactDOM.render(<Weather/>,document.getElementById('test'))


    </script>
</body>
</html>

state的简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state案例</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Weather extends React.Component {

            state = {isHot:true}

            constructor(props){
                super(props)
            }

            render(){
                return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
            }
            
            //改为箭头函数，this会往外找，此函数的外面不正是Weather吗
            changeWeather = () => {
                const isHot = this.state.isHot
                this.setState({isHot:!isHot})
            }

        }

        //2、渲染组件到页面
        ReactDOM.render(<Weather/>,document.getElementById('test'))


    </script>
</body>
</html>

强烈注意

（1）组件中render方法中的this为组件实例对象。

（2）组件自定义的方法中this为undefined，如何解决？

        ① 强制绑定this：通过函数对象的bind()

        ② 箭头函数

（3）状态数据，不能直接修改或更新，必须借助React API中的setState()方法。

2.5、组件三大核心属性2: props

需求（props基本使用）

自定义用来显示一个人员信息的组件（动态传递参数）

（1）姓名必须指定，且为字符串类型

（2）性别为字符串类型，如果性别没有指定，默认为男

（3）年龄必须指定，且为数字类型

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props案例</title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Person extends React.Component {

            render(){
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )
            }

        }

        //2、渲染组件到页面
        ReactDOM.render(<Person name="小明" age="19" sex="男"/>,document.getElementById('test1'))
        ReactDOM.render(<Person name="小美" age="21" sex="女"/>,document.getElementById('test2'))
        ReactDOM.render(<Person name="老刘" age="55" sex="男"/>,document.getElementById('test3'))


    </script>
</body>
</html>

批量传递props

假如说你要传递的参数特别多，那么一个个写就太麻烦，可以采用简写形式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props案例</title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Person extends React.Component {

            render(){
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )
            }

        }

        const p = {'name':'老刘','age':55,'sex':'男'}

        //2、渲染组件到页面
        ReactDOM.render(<Person name="小明" age="19" sex="男"/>,document.getElementById('test1'))
        ReactDOM.render(<Person name="小美" age="21" sex="女"/>,document.getElementById('test2'))
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))


    </script>
</body>
</html>

对props进行限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props案例</title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/javascript" src="js/prop-types.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Person extends React.Component {

            render(){
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )
            }

        }

        //设定props规则
        Person.propTypes = {
            name:PropTypes.string.isRequired,  //name属性必填，而且必须是string类型
            sex:PropTypes.string,
            age:PropTypes.number
        }
        
        //设定props默认值
        Person.defaultProps = {
            name:'无名氏',
            sex:'不男不女',
            age:18
        }

        const p = {'name':'老刘','age':55,'sex':'男'}

        //2、渲染组件到页面
        ReactDOM.render(<Person  age="19" sex="男"/>,document.getElementById('test1'))
        ReactDOM.render(<Person name="小美" age="21" sex="女"/>,document.getElementById('test2'))
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))


    </script>
</body>
</html>

props简写方式

我们现在定义props规范是在类的外部定义的，如下：

我们如果想在类内部定义，就改为static修饰的方式：

类式组件中的构造器与props

如果你要在构造器中使用this.props，那你就必须写构造器，如果你没这个需求，那就不用写。比如我想在构造器中使用props，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props案例</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/javascript" src="js/prop-types.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Person extends React.Component {

            constructor(props) {
                super(props)
                console.log("在构造器中使用props",this.props)
            }

            //设定props规则
            static propTypes = {
                name:PropTypes.string.isRequired,  //name属性必填，而且必须是string类型
                sex:PropTypes.string,
                age:PropTypes.number
            }

            //设定props默认值
            static defaultProps = {
                name:'无名氏',
                sex:'不男不女',
                age:18
            }

            render(){
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )
            }

        }

        //2、渲染组件到页面
        ReactDOM.render(<Person name="小白"/>,document.getElementById('test'))


    </script>
</body>
</html>

函数式组件使用props

函数式组件虽然用不了state和refs，但可以用props。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件使用props</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/javascript" src="js/prop-types.js"></script>


    <script type="text/babel">
        //1、创建组件
        function Person(props){
            const {name,age,sex} = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                    <li>性别：{sex}</li>
                </ul>
            )
        }

        //2、渲染组件到页面
        ReactDOM.render(<Person name="小白" sex="男" age={18}/>,document.getElementById('test'))


    </script>
</body>
</html>

2.6、组件三大核心属性3: refs

需求

点击按钮，提示第一个输入框的值。

当第二个输入框失去焦点时，提示这个输入框中的值。

字符串形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>refs案例</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Demo extends React.Component{

            //展示左侧输入框的数据
            showData = () => {
                const {input1} = this.refs
                alert(input1.value)
            }

            //展示右侧输入框的数据
            showData2 = () => {
                const {input2} = this.refs
                alert(input2.value)
            }

            render(){
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }

        //2、渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))


    </script>
</body>
</html>

回调形式的ref

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>refs案例</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Demo extends React.Component{

            //展示左侧输入框的数据
            showData = () => {
                const {input1} = this
                alert(input1.value)
            }

            //展示右侧输入框的数据
            showData2 = () => {
                const {input2} = this
                alert(input2.value)
            }

            render(){
                return (
                    <div>
                        <input ref={(c)=>{this.input1 = c}} type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <input ref={(c)=>{this.input2 = c}} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }

        //2、渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))


    </script>
</body>
</html>

回调ref执行次数的问题

如果ref回调函数是以内联函数的方式定义的，在更新过程中会被执行两次，第一次传入参数null，然后第二次会传入参数DOM元素。这是因为在每次渲染时会创建一个新的函数实例，所以React清空旧的ref并设置新的。通过将ref的回调函数定义成class的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

saveInput = (c) => {
	this.input1 = c;
}

<!--此行代码在更新过程中会执行两次-->
<!--<input ref={(c)=>{this.input1 = c}} type="text" placeholder="点击按钮提示数据" />-->

<!--改为如下代码，可解决执行两次的情况-->
<input ref=this.saveInput type="text" placeholder="点击按钮提示数据" />

createRef的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createRef使用</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">
        //1、创建类式组件
        class Demo extends React.Component{
            // React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点
            myRef = React.createRef()

            showData = () => {
                console.log(this.myRef)
            }

            render(){
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                    </div>
                )
            }
        }

        //2、渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
        
    </script>
</body>
</html>

2.7、React事件处理

1、通过onXxx属性指定事件处理函数(注意大小写)。
        1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件。
        2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)。
2、通过event.target得到发生事件的DOM元素对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件使用</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">

        //1、创建类式组件
        class Demo extends React.Component{

            showData = (event) => {
                alert(event.target.value)
            }

            render(){
                return(
                    <div>
                        <!--当文本框失去焦点，弹出输入的数据-->
                        <input type="text" onBlur={this.showData}/>
                    </div>
                )
            }
        }

        //2、渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))


    </script>
</body>
</html>

2.8、收集表单数据

需求

定义一个包含表单的组件，输入用户名密码后，点击登录提示输入信息。

非受控组件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非受控组件</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">

        //1、创建类式组件
        class Login extends React.Component{

            handleSubmit = (event) => {
                event.preventDefault() //阻止表单提交
                const {username,password} = this
                alert(`你输入的用户名是：${username.value}，你输入的密码是：${password.value}`)
            }

            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input ref={c => this.username = c} type="text" name="username"/>
                        密码：<input ref={c => this.password = c} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

        //2、渲染组件到页面
        ReactDOM.render(<Login/>,document.getElementById('test'))


    </script>
</body>
</html>

受控组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">

        //1、创建类式组件
        class Login extends React.Component{

            //初始化状态
            state = {
                username:'',
                password:''
            }

            saveUsername = (event) => {
                this.setState({username:event.target.value})
            }

            savePassword = (event) => {
                this.setState({password:event.target.value})
            }

            handleSubmit = (event) => {
                event.preventDefault() //阻止表单提交
                const {username,password} = this.state
                alert(`你输入的用户名是：${username}，你输入的密码是：${password}`)
            }

            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveUsername} type="text" name="username"/>
                        密码：<input onChange={this.savePassword} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }

        //2、渲染组件到页面
        ReactDOM.render(<Login/>,document.getElementById('test'))


    </script>
</body>
</html>

2.9、生命周期

需求

定义组件实现以下功能：
  1、让指定的文本做显示 / 隐藏的渐变动画
  2、从完全可见，到彻底消失，耗时2S
  3、点击“不活了”按钮从界面中卸载组件

实现代码（引出生命周期）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
</head>
<body>
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用来支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>


    <script type="text/babel">

        //1、创建类式组件
        class Life extends React.Component{

            state = {opacity:1}

            death = () => {
                //卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }

            //组件挂载完毕调用
            componentDidMount(){
                this.timeer = setInterval(() => {
                    //获取原状态
                    let {opacity} = this.state
                    opacity -= 0.1
                    if (opacity <= 0){
                        opacity = 1
                    }
                    this.setState({opacity:opacity})
                },200)
            }
            
            componentWillUnmount(){
                //清除定时器
                clearInterval(this.timeer)
            }

            render(){
                return(
                    <div>
                        <h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
                        <button onClick={this.death}>不活了</button>
                    </div>
                )
            }

        }

        //2、渲染组件到页面
        ReactDOM.render(<Life/>,document.getElementById('test'))


    </script>
</body>
</html>

生命周期流程图（旧版本）

生命周期的三个阶段（旧）
    1、初始化阶段: 由ReactDOM.render()触发---初次渲染

        （1）constructor()
        （2）componentWillMount()
        （3）render()
        （4）componentDidMount()

     2、更新阶段: 由组件内部this.setSate()或父组件重新render触发

        （1）shouldComponentUpdate()
        （2）componentWillUpdate()
        （3）render()
        （4）componentDidUpdate()

    3、卸载组件: 由ReactDOM.unmountComponentAtNode()触发

        （1）componentWillUnmount()

生命周期流程图（新版本）

生命周期的三个阶段（新）
        1、初始化阶段: 由ReactDOM.render()触发---初次渲染
                （1）constructor()
                （2）getDerivedStateFromProps 
                （3）render()
                （4）componentDidMount()
        2、更新阶段: 由组件内部this.setSate()或父组件重新render触发
                （1）getDerivedStateFromProps
                （2）shouldComponentUpdate()
                （3）render()
                （4）getSnapshotBeforeUpdate：更新前获取快照，此函数的返回值将作为参数传递给componentDidUpdate。
                （5）componentDidUpdate()
       3、卸载组件: 由ReactDOM.unmountComponentAtNode()触发 

2.10、虚拟DOM的diffing算法

面试题一：react/vue中的key有什么作用？key的内部原理是什么？

（1）简单的说，key是虚拟DOM对象的标识，在更新显示时key起着及其重要的作用。

（2）详细的说，当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后react进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

a：旧的虚拟DOM找到了与新的虚拟DOM相同的key：
 ① 若虚拟DOM中内容没变，直接使用之前的真实DOM
 ② 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM

b：旧的虚拟DOM中未找到与新虚拟DOM相同的key
    根据数据创建真实DOM，随后渲染到页面

面试题二：为什么遍历列表时，key最好不要用index？

1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：
    会产生没有必须要的真实DOM更新 ==> 界面效果没问题，但效率低。
    
2、如果结构中还包含输入类的DOM：
    会产生错误DOM更新 ==> 界面有问题。

3、注意：如果不存在对数据的逆序添加、逆序删除等破坏顺序操作：
    仅用于渲染列表用于展示，使用index作为key是没有问题的。

神农尝百码
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React尚硅谷115-126(setState、Hooks、Fragment、context、组件优化、renderprops、错误边界、组件通信方式总结)
2301_78416672的博客
05-06 751
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
React尚硅谷张天禹笔记（更新中......）
weixin_52617854的博客
06-05 3102
React笔记
【尚硅谷React】——React全家桶笔记
m0_54853503的博客
07-29 665
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；由Facebook开发且开源。中文官网英文官网原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；JS直接操作DOM会使浏览器进行大量的重绘重排；原生JS没有组件化编码方案，代码复用率低react开发者工具Chrome插件ReactDeveloperTool（注意安装来源为facebook的）方法一在package.json中追加如下配置"proxy""http5000"优点方法二第一步。...
尚硅谷-React
m0_56079094的博客
04-26 1908
1.React初认识 （1）React是什么 react是用于构建用户 界面（视图） 的JavaScript库 也可以说react是一个将数据渲染为html视图开端的开源JS库 （2）React的功能是什么 操作Dom呈现页面 （3）为什么学React：原生JS的痛点 1 原生js操作dom效率低，繁琐 document.getElamentById('name') 2 使用js直接操作dom，浏览器会进行大量的重汇重排 3.原生js没有组件化的编码方案，代码复用率低 组件化：html、css、js都拆
React教程（详细版）
热门推荐
Ronychen的博客
03-19 19万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
（尚）react教程（2022-11-20）
qq_66274152的博客
11-20 307
（尚）react教程
尚硅谷-React以及源代码
09-06
尚硅谷-React以及源代码尚硅谷-React以及源代码尚硅谷-React以及源代码
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
React资料配合B站尚硅谷教程
04-19
通过结合这个React资料包和B站尚硅谷的教程，你可以系统地学习React的基础知识和高级特性。 本资料包可能包含了以下内容： 1. **React基础**：这部分通常会讲解React的核心概念，如JSX、状态管理、props、生命周期...
atguigu_react：尚硅谷react学习
02-09
1.尚硅谷学习进度2021年01月23日React教程：01〜022021年01月24日11 React教程：03〜06（03：52）2021年01月25日React教程：062021年01月26日React教程：07〜132021年01月27日React教程：14〜20（02:28）2021年01月...
尚硅谷react 高清视频
10-09
尚硅谷内部高清react视频，拿走
尚硅谷前端全套视频代码vue+react
10-07
尚硅谷前端全套视频代码/微信小程序/HTML5/JS/jQuery/vue/react视频教程
React项目笔记-尚硅谷谷粒后台（上）
cloudyless的博客
04-21 2059
目录 1.创建脚手架 2.引入antd 2.1自定义主题（如有不懂可以参照antd官网，可在印记中文中查看） 2.1.1下载包@craco/craco和craco-less 2.1.2在根目录下创建craco.config.js文件 2.1.3修改package.json默认配置项 2.1.4引入antd样式 3.引入路由 3.1Switch 3.2Redirect 3.3.BrowserRouter 4.login页面的页面布局 4.1外层容器 4.2登录页面头部部分 .
尚硅谷react课程-day05
qq_64970126的博客
10-19 1063
1、高阶函数 2、组件的生命周期
[尚硅谷React笔记]——第5章 React 路由
最新发布
qq_56444564的博客
10-22 460
return (})
尚硅谷笔记——求和案例纯react版、redux精简版
weixin_53317758的博客
12-09 506
redux中actionCreators可以自己写，精简版中只有store、reducer，store的api学习：store.getState得到reducer状态、store.subscribe订阅reducer更新状态、store.dispatch告诉redux该加哪些数据。把store想象成是reducer的律师，全权代理reducer
尚硅谷react笔记
08-18
抱歉，提供的引用内容与问题不符。请提供与"尚硅谷react笔记"相关的引用内容或提供更具体的问题，我将尽力帮助您。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【尚硅谷React】——React全家桶笔记](https://blog.csdn.net/m0_67393342/article/details/126065588)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [尚硅谷React学习笔记（上）](https://blog.csdn.net/qq_38196449/article/details/131585448)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神农尝百码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值