React学习笔记（一）：组件三大核心属性、组件的生命周期

最新推荐文章于 2022-10-09 12:16:43 发布
最新推荐文章于 2022-10-09 12:16:43 发布
阅读量415 收藏
点赞数 2
文章标签： React React组件三大核心属性 React组件的生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40378034/article/details/113799217
版权

1、React入门

1）、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"> /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM, document.getElementById('test'))
	</script>
</body>

</html>
2）、创建虚拟DOM的两种方式
1）使用jsx创建虚拟DOM
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_使用jsx创建虚拟DOM</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = <h1 id="title">Hello,React</h1>
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

</html>
2）使用js创建虚拟DOM
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2_使用js创建虚拟DOM</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <script type="text/javascript">
        //创建虚拟DOM React.createElement(标签名, 标签属性, 标签内容)
        const VDOM = React.createElement('h1', { id: 'title' }, 'Hello,React')
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

</html>
3）虚拟DOM与真实DOM
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_使用jsx创建虚拟DOM</title>
</head>

<body>
    <div id="test"></div>
    <div id="demo"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = <h1 id="title">Hello,React</h1>
        ReactDOM.render(VDOM, document.getElementById('test'))
        const TDOM = document.getElementById('demo');
        debugger
        console.log('虚拟DOM', VDOM)
        console.log('真实DOM', TDOM)

        /*
        关于虚拟DOM:
        1.本质是Object类型的对象(一般对象)
        2.虚拟DOM比较轻,真实DOM比较重,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性
        3.虚拟DOM最终会被React转换为真实DOM,呈现在页面上
        */
    </script>
</body>

</html>
3）、React JSX
1）jsx语法规则
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myId = 'demo'
        const myData = 'Hello,React'

        const VDOM = (
            <div>
                <h2 className="title" id={myId}>
                    <span style={{ color: 'white', fontSize: '20px' }}>{myData}</span>
                </h2>
                <h2 className="title" id={myId.toUpperCase()}>
                    <span style={{ color: 'white', fontSize: '20px' }}>{myData}</span>
                </h2>
                <input type="text"></input>
            </div>
        )

        ReactDOM.render(VDOM, document.getElementById('test'))

        /*
        jsx语法规则:
        1.定义虚拟DOM时,不要写引号
        2.标签中混入JS表达式时要用{}
        3.样式的类名指定不要用class,要用className
        4.内联样式,要用style={{key:value}}的形式去写
        5.只有一个根标签
        6.标签必须闭合
        7.标签首字母
        1)若小写字母开头,则将标签转为html中同名元素,若html中无该标签对应的同名元素,则报错
        2)若大写字母开头,react就去渲染对应的组件,若组件中没有定义,则报错
        */
    </script>
</body>

</html>
2）jsx练习
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jsx练习</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const data = ['Angular', 'React', 'Vue']
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>)

        ReactDOM.render(VDOM, document.getElementById('test'))    
    </script>
</body>

</html>
4）、模块与组件、模块化与组件化的理解
1）模块

向外提供特定功能的js程序，一般就是一个js文件

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

作用：复用js，简化js的编写，提高js运行效率

2）组件

用来实现局部功能效果的代码和资源的集合（html/css/js/image等等）

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

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

3）模块化

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

4）组件化

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

2、React面向组件编程

1）、基本理解和使用
1）函数式组件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_函数式组件</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //1.创建函数式组件
        function MyComponent() {
            console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式
            return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
        }
        //2.渲染组件到页面
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
        /*
        执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么？
            1.React解析组件标签,找到了MyComponent组件
            2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中
        */
    </script>
</body>

</html>
2）类式组件

类的基本知识：

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

<head>
    <meta charset="UTF-8">
    <title>类的基本知识</title>
</head>

<body>
    <script type="text/javascript">
        /*
        总结:
        1.类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定属性才写
        2.如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的
        3.类中所定义的方法,都是放在类的原型对象上,供实例去使用
        */

        //创建一个Person类
        class Person {
            //构造器方法
            constructor(name, age) {
                //构造器中的this是类的实例对象
                this.name = name
                this.age = age
            }

            //一般方法
            speak() {
                //speak方法放在了类的原型对象上,供实例使用
                //通过Person实例调用speak时,speak中的this就是Person实例
                console.log(`我叫${this.name},我的年龄是${this.age}`)
            }
        }

        //创建一个Student类,继承于Person类
        class Student extends Person {
            constructor(name, age, grade) {
                super(name, age)
                this.grade = grade
            }

            //重写从父类继承过来的方法
            speak() {
                console.log(`我叫${this.name},我的年龄是${this.age},我读的是${this.grade}年级`)
            }

            study() {
                console.log('我很努力的学习')
            }
        }

        //创建一个Person的实例对象
        const p1 = new Person('tom', 18)
        const p2 = new Person('jerry', 19)

        console.log(p1)
        console.log(p2)

        p1.speak()
        p2.speak()

        const s1 = new Student('小张', 15, '高一')
        console.log(s1)
        s1.speak()
        s1.study()
    </script>
</body>

</html>

类式组件：

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

<head>
    <meta charset="UTF-8">
    <title>2_类式组件</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //1.创建类式组件
        class MyComponent extends React.Component {
            //render方法放在了MyComponent的原型对象上,供实例使用
            //render方法中的this就是MyComponent组件实例对象
            render() {
                console.log(this)
                return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
            }
        }

        //2.渲染组件到页面
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
        /*
        执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么？
            1.React解析组件标签,找到了MyComponent组件
            2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法
            3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面上
        */
    </script>
</body>

</html>
2）、组件三大核心属性：state
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_state</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //1.创建组件
        class Weather extends React.Component {
            //构造器调用1次
            constructor(props) {
                super(props)
                //初始化状态
                this.state = { isHot: true }
                //解决changeWeather中this指向问题
                this.changeWeather = this.changeWeather.bind(this)
            }

            //changeWeather点击几次调用几次
            changeWeather() {
                //state不可直接更改,必须通过setState进行更新,且更新是一种合并,不是替换
                const { isHot } = this.state
                this.setState({ isHot: !isHot })
            }

            //render调用1+n次 1是初始化的那次 n是状态更新的次数
            render() {
                const { isHot } = this.state
                return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
            }
        }

        //2.渲染组件
        ReactDOM.render(<Weather />, document.getElementById('test'))
    </script>
</body>

</html>

state的简写方式：

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

<head>
    <meta charset="UTF-8">
    <title>2_state的简写方式</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Weather extends React.Component {
            //初始化状态
            state = { isHot: true }

            //自定义方法 要用赋值语句的形式+箭头函数
            changeWeather = () => {
                const { isHot } = this.state
                this.setState({ isHot: !isHot })
            }

            render() {
                const { isHot } = this.state
                return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
            }
        }

        ReactDOM.render(<Weather />, document.getElementById('test'))
    </script>
</body>

</html>

小结：

1）state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）

2）组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）

3）组件中render方法中的this为组件实例对象

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

a.强制绑定this:通过函数对象的bind()

b.箭头函数

5）不能直接修改或更新状态数据

3）、组件三大核心属性：props

展开运算符：

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

<head>
    <meta charset="UTF-8">
    <title>2_展开运算符</title>
</head>

<body>
    <script type="text/javascript">
        let arr1 = [1, 3, 5, 7, 9]
        let arr2 = [2, 4, 6, 8, 10]
        console.log(...arr1)//展开一个数组
        
        let arr3 = [...arr1, ...arr2]//连接数组
        console.log(...arr3)

        //在函数中使用
        function sum(...numbers) {
            return numbers.reduce((preValue, currentValue) => {
                return preValue + currentValue
            })
        }
        console.log(sum(1, 2, 3, 4))

        //构造字面量对象时使用展开语法
        let person = { name: 'tom', age: 18 }
        let person2 = { ...person }
        console.log(person2)

        //合并
        let person3 = { ...person, name: 'jack', address: '地球' }
        console.log(person3)
    </script>
</body>

</html>
1）props基本使用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_props基本使用</title>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Person extends React.Component {
            render() {
                const { name, sex, age } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 10}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Person name="tom" sex="女" age={18} />, document.getElementById('test'))

        const p = { name: 'jerry', sex: '男', age: 19 }
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'))
    </script>
</body>

</html>
2）对props进行限制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2_对props进行限制</title>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Person extends React.Component {
            render() {
                const { name, sex, age } = this.props
                //props是只读的
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 10}</li>
                    </ul>
                )
            }
        }

        //对标签属性进行类型、必要性的限制
        Person.propTypes = {
            name: PropTypes.string.isRequired,//限制name必传,且为字符串
            sex: PropTypes.string,//限制sex为字符串
            age: PropTypes.number,//限制age为数值
            speak: PropTypes.func//限制speak为函数
        }

        //指定默认的标签属性值
        Person.defaultProps = {
            sex: '男',
            age: 20
        }

        ReactDOM.render(<Person name="tom" age={18} speak={speak} />, document.getElementById('test'))

        const p = { name: 'jerry', sex: '女' }
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'))

        function speak() {
            console.log('我说话了')
        }
    </script>
</body>

</html>
3）props的简写方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3_props的简写方式</title>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Person extends React.Component {

            constructor(props) {
                //构造器中是否接收props,是否传递给super,取决于是否希望在构造器中通过this访问props
                super(props)
                console.log('constructor', this.props)
            }

            //对标签属性进行类型、必要性的限制
            static propTypes = {
                name: PropTypes.string.isRequired,//限制name必传,且为字符串
                sex: PropTypes.string,//限制sex为字符串
                age: PropTypes.number,//限制age为数值
                speak: PropTypes.func//限制speak为函数
            }

            //指定默认的标签属性值
            static defaultProps = {
                sex: '男',
                age: 20
            }

            render() {
                const { name, sex, age } = this.props
                //props是只读的
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 10}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Person name="tom" age={18} speak={speak} />, document.getElementById('test'))

        const p = { name: 'jerry', sex: '女' }
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'))

        function speak() {
            console.log('我说话了')
        }
    </script>
</body>

</html>

小结：

1）每个组件对象都会有props属性

2）组件标签的所有属性都保存在props中

3）props的作用：通过标签属性从组件外向组件内传递变化的数据

4）组件内部不要修改props数据

4）、组件三大核心属性：refs与事件处理
1）字符串形式的ref
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_字符串形式的ref</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        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="点击按钮提示数据" />&nbsp;
                        <button ref="button" onClick={this.showData}>点击提示左侧数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>
2）回调函数形式的ref
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2_回调函数形式的ref</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            //展示左侧输入框的数据
            showData = () => {
                const { input1 } = this
                alert(input1.value)
            }

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

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

        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <title>3_回调ref中回调执行次数的问题</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            state = { isHot: true }

            changeWeather = () => {
                const { isHot } = this.state
                this.setState({ isHot: !isHot })
            }

            showData = () => {
                const { input1 } = this
                alert(input1.value)
            }

            saveInput = (currentNode) => {
                this.input1 = currentNode
                console.log('@', currentNode)
            }

            render() {
                const { isHot } = this.state
                return (
                    <div>
                        <h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
                        <button onClick={this.changeWeather}>点我切换天气</button>

                        <br />
                        <br />

                        <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData}>点击提示左侧数据</button>&nbsp;
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>
3）createRef创建ref容器
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>4_createRef</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            /*
            React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是专人专用的
            */
            myRef = React.createRef()
            myRef2 = React.createRef()

            showData = () => {
                alert(this.myRef.current.value)
            }

            showData2 = () => {
                alert(this.myRef2.current.value)
            }

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

        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>
4）事件处理
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            /*
            1.通过onXxx属性指定事件处理函数(注意大小写)
                a.React使用的是自定义(合成)事件,而不是使用的原生DOM事件 ———— 为了更好地兼容性
                b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ———— 为了高效
            2.通过event.target得到发生事件的DOM元素对象 ———— 不要过度使用ref
            */
            myRef = React.createRef()

            showData = () => {
                alert(this.myRef.current.value)
            }

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

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

        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>
5）、收集表单数据
1）非受控组件

非受控组件：表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用ref从DOM获取表单值）

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

<head>
    <meta charset="UTF-8">
    <title>1_非受控组件</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        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" />&nbsp;
                        密码：<input ref={c => this.password = c} type="password" name="password" />&nbsp;
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>
2）受控组件

受控组件：组件中的状态是可以根据用户的输入，实时的进行改变，并且展示在界面上

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

<head>
    <meta charset="UTF-8">
    <title>2_受控组件</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        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" />&nbsp;
                        密码：<input onChange={this.savePassword} type="password" name="password" />&nbsp;
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>
6）、高阶函数和函数柯里化
1）高阶函数_函数柯里化
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_高阶函数_函数柯里化</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
    /* 
		高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数
			1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数
			2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
			常见的高阶函数有:Promise、setTimeout、arr.map()等等

		函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式 
		function sum(a) {
            return (b) => {
                return (c) => {
                    return a + b + c
                }
            }
        }
		*/

        class Login extends React.Component {
            state = {
                username: '',
                password: ''
            }

            //保存表单数据到状态中
            saveFormData = (dataType) => {
                return (event) => {
                    this.setState({ [dataType]: event.target.value })
                    console.log(this.state)
                }
            }

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

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

        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>
2）不用柯里化的实现
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2_不用柯里化的实现</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Login extends React.Component {
            state = {
                username: '',
                password: ''
            }

            //保存表单数据到状态中
            saveFormData = (dataType, event) => {
                this.setState({ [dataType]: event.target.value })
                console.log(this.state)
            }

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

            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={event => this.saveFormData('username', event)} type="text" name="username" />&nbsp;
                        密码：<input onChange={event => this.saveFormData('password', event)} type="password" name="password" />&nbsp;
                        <button>登录</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>
7）、组件的生命周期
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Life extends React.Component {
            state = { opacity: 1 }

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

            //组件挂载完毕
            componentDidMount() {
                console.log('componentDidMount')
                this.timer = setInterval(() => {
                    //获取原状态
                    let { opacity } = this.state
                    //减小0.1
                    opacity -= 0.1
                    if (opacity <= 0) {
                        opacity = 1
                    }
                    //设置新的透明度
                    this.setState({ opacity })
                }, 200)
            }

            //组件将要卸载
            componentWillUnmount() {
                console.log('componentWillUnmount')
                //清除定时器
                clearInterval(this.timer)
            }

            //初始化渲染、状态更新之后
            render() {
                console.log('render')
                return (
                    <div>
                        <h2 style={{ opacity: this.state.opacity }}>React学不会怎么办？</h2>
                        <button onClick={this.death}>不活了</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Life />, document.getElementById('test'))
    </script>
</body>

</html>

组件从创建到死亡它会经历一些特定的阶段

React组件中包含一系列勾子函数（生命周期回调函数），会在特定的时刻调用

我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作

在这里插入图片描述

生命周期的三个阶段（旧）

1）初始化阶段：由ReactDOM.render()触发初次渲染

  1. constructor()（构造器）
  2. componentWillMount()（组件将要挂载的钩子）
  3. render()
  4. componentDidMount()（组件挂载完毕的钩子）

2）更新阶段：由组件内部this.setState()或父组件重新render触发

  1. shouldComponentUpdate()（控制组件更新的阀门）
  2. componentWillUpdate()（组件将要更新的钩子）
  3. render()
  4. componentDidUpdate()（组件更新完毕的钩子）

3）卸载组件：由ReactDOM.unmountComponentAtNode()触发

  1. componentWillUnmount()（组件将要卸载的钩子）

在这里插入图片描述

生命周期的三个阶段（新）

1）初始化阶段：由ReactDOM.render()触发初次渲染

  1. constructor()
  2. getDerivedStateFromProps()（若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps）
  3. render()
  4. componentDidMount()

2）更新阶段：由组件内部this.setState()或父组件重新render触发

  1. getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()（在更新之前获取快照）
  5. componentDidUpdate()

3）卸载组件：由ReactDOM.unmountComponentAtNode()触发

  1. componentWillUnmount()

视频资料：

https://www.bilibili.com/video/BV1wy4y1D7JT

邋遢的流浪剑客
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ReactNative中组件的生命周期
02-25
RN组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下...
组件实例的三大核心属性——state、props、refs
MaNqo的博客
07-17 408
组件实例的三大核心属性 一、state state的理解 一个组件如果是有状态（state）的，那么这个组件就是复杂组件。也就是如果一个组件没有state，这个组件就是简单组件。 state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合) 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示(重新渲染组件) 组件的状态里面存着数据，通过改变数据更新组件的状态来更新着页面的展示。 但我们创建类式组件的时候，通过把组件实例对象打印出来，可以看到它的state的值
React的三大核心 (state , props , refs)
fanfan176的博客
10-09 676
React的三大核心
2021-12-21 学习记录--React-组件实例三大核心属性：state、props、refs
weixin_48850734的博客
12-27 492
React-组件实例三大核心属性：state、props、refs
react中组件实例的三大核心属性（state、props、refs）
fangqi20170515的博客
07-28 558
react中组件实例的三大核心属性（state、props、refs）
React 框架基础 —— 三大核心属性
weixin_42351470的博客
09-07 339
这里写自定义目录标题基础概念入门依赖包与Hello React虚拟DOM的两种创建方式jsx 语法规则模块与组件面向组件编程 基础概念 （第三点 eg： 进行虚拟DOM比较） 入门 依赖包与Hello React 引入包：蓝色的核心库要在红色的核心库之前引入 直接利用 jsx 创建了虚拟 DOM 书写注意事项： babel… 虚拟DOM的两种创建方式 使用 jsx 创建 代码： 使用原始 js 创建 （不再需要 babel 将 jsx 转换为 js；type 还原为 java
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React中组件的生命周期 - 详解.png
08-05
React中组件的生命周期 - 详解
浅谈React Native 中组件的生命周期
08-29
本篇文章主要介绍了浅谈React Native 中组件的生命周期，非常具有实用价值，需要的朋友可以参考下
react面向组件化编程--组件三大核心属性state/props/refs
weixin_45790562的博客
08-09 174
这里写目录标题组件三大核心之一 ----- state简写state组件三大核心之一 ----- propsprops简写组件三大核心之一 ----- refs 组件三大核心之一 ----- state 需求: 定义一个展示天气信息的组件 默认展示天气炎热 或 凉爽 点击文字切换天气 理解： state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 实现： <script
React学习三 —— react组件的三大属性（state、props、refs）
qq_51574759的博客
10-06 990
React组件有很多属性，在其中有三个属性最为核心和重要： - state - props - refs state让你可以通过数据驱动视图，让视图自动根据数据的改变而改变。 props可以提高组件的灵活性，通过外界传值让组件根据用户特性而呈现不同的视图。 refs能够减少用户对DOM的直接操作，而可以通过获取代理节点而提高开发效率和页面性能。
React的基本理解使用、组件的三大核心属性
Qiuxuntao的博客
04-20 1145
文章目录一、 基本理解和使用1、使用React开发者工具调试2、定义组件 一、 基本理解和使用 1、使用React开发者工具调试 2、定义组件
react三大核心属性
Nikki_u的博客
05-30 473
react三大核心属性之state 1、state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合） 2、组件被称为“状态机”，通过更新组件的state来对应更多的页面显示（重新渲染组件） 3、react核心理念状态不可变（专业！！） class MyComponent extends React.Component{ constructor(props){ super(props) this.state={isHot:false}
React组件核心
qq_45666837的博客
07-27 252
文章目录前言一、Props 的只读性二、State 和 setState正确地使用 Stateprops和state的区别三、事件处理函数组件当中使用:类式组件当中使用:四、子传父五、组件通信(跨组件)为什么使用Context?Context.ProviderContext.Consumer六 非受控组件与受控组件非受控组件受控组件总结 前言 本文介绍了一下React中的 props&state、事件处理、子传父、组件通信以及非受控组件与受控组件,希望对你有所帮助。 一、Props 的只读性 p
React中的三种类型组件介绍
weixin_33733810的博客
11-23 1518
React从诞生到现在，越来越多的前端开发者喜欢上该框架，其原因有很多，其中一个主要的原因是因为它的组件很灵活，而本博客主要介绍React的三种类型的组件：受控类型，无状态类型，高阶类型。 在讲组件之前，先介绍一下React组件的两个重要特性： props:组件属性，专门用来连接父子组件间通信，父组件传输父类成员，子组件可以利用但不能编...
React入门到组件的三大核心
weixin_52137798的博客
07-26 514
React简介 官网 1.英文官网: https://reactjs.org/ 2.中文官网: https://react.docschina.org/ 介绍描述 1.用于动态构建用户界面的 JavaScript 库(只关注于视图) 2.由Facebook开源 React的特点 1.声明式编码 2.组件化编码 3.React Native 编写原生应用 4.高效（优秀的Diffing算法） React高效的原因 1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 2.DOM Diffin
组件实例的三大核心属性
weixin_44490109的博客
08-11 368
目录组件实例的三大核心属性1、state1.1 理解1.2 使用2、props2.1 理解2.2 作用2.3 使用2.3.1 基本使用2.3.2 对props中的属性值进行类型限制和必要性限制3、refs与事件处理3.1 理解3.2 何时使用3.3 使用3.3.1 字符串形式的ref3.3.2 回调形式的refs3.3.3 使用createRef创建ref容器 --- React最推荐的一种形式，React 16.3 版本引入3.4 总结4、事件处理 组件实例的三大核心属性 1、state 1.1 理解
React-4-组件三大核心属性
xiao_yu_gan的博客
09-12 513
React组件三大核心属性：state、props、refs
React的生命周期的三个阶段 挂载、渲染、卸载
JackieDYH的博客
06-30 2070
1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmount () 2. 更新过程 2.1. componentWillReceiveProps (nextProps) 2.2.shouldComponentUpdate(nextProps,nextState) 2.3.componentWillUpdate (nextProps,nextState) 2....
React组件生命周期
最新发布
04-01
React组件的生命周期分为三个阶段：挂载阶段、更新阶段、卸载阶段。 1. 挂载阶段 - constructor()：组件的构造函数，在组件创建时调用。 - static getDerivedStateFromProps()：在组件创建时和组件更新时都会调用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

邋遢的流浪剑客

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

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

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

打赏作者

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

抵扣说明：

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

余额充值