react入门（html形式学习）

最新推荐文章于 2024-05-06 16:24:30 发布

山竹回家了

最新推荐文章于 2024-05-06 16:24:30 发布

阅读量1.4k

点赞数

分类专栏：前端 React 文章标签： react.js javascript html

本文链接：https://blog.csdn.net/weixin_47886687/article/details/124511403

版权

前端同时被 2 个专栏收录

122 篇文章 6 订阅

订阅专栏

React

9 篇文章 0 订阅

订阅专栏

尚硅谷看的视频

react特点:

1.采用组件化模式、声明式编程，提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互.

一、入门

1.初识react案例

在这里插入图片描述

2.虚拟dom的两种创建方式

2.1用jsx实现

用这种写法,其实最终也是转译成2.2js那种写法的,jsx就相当于2.2的js写法的语法糖

<body>
    <!-- 准备好一个"容器 -->
    <div id="text"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">/*此处一定要写babel,用于转译jsx*/
        // 1.创建虚拟dom
        const VDOM = (<h1 id="title"><span>hello,React</span></h1>)/*不要写引号,因为不是字符串*/
        // 2.渲染虚拟dom到页面
        // ReactDOM.renser(虚拟dom,容器)
        ReactDOM.render(VDOM, document.getElementById('text'))
    </script>
</body>

</html>

在这里插入图片描述

2.2用纯js实现(一般不用)

<body>
    <!-- 准备好一个"容器 -->
    <div id="text"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <script type="text/JavaScript">/*此处一定要写babel,用于转译jsx*/
        // 1.创建虚拟dom
        // const VDOM = React.createElement(标签,属性,容器)
        const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,react'))
        // 2.渲染虚拟dom到页面
        // ReactDOM.renser(虚拟dom,容器)
        ReactDOM.render(VDOM, document.getElementById('text'))
    </script>
</body>

在这里插入图片描述

2.3虚拟dom与真实dom

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

<body>
    <!-- 准备好一个"容器 -->
    <div id="text"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">/*此处一定要写babel,用于转译jsx*/
        // 1.创建虚拟dom
        const VDOM = <h1 id="title"><span>hello,React</span></h1>/*不要写引号,因为不是字符串*/
        // 2.渲染虚拟dom到页面
        // ReactDOM.renser(虚拟dom,容器)
        ReactDOM.render(VDOM, document.getElementById('text'))
        console.log('虚拟dom', VDOM)
        console.log(typeof VDOM)
        console.log(VDOM instanceof Object)
        const TDOM = document.getElementById('text')
        console.log('真实DOM', TDOM)
        debugger
    </script>
</body>

在这里插入图片描述

3.jsx语法规则

1.定义虚拟DOM时,不要写引号
2.标签中混入JS表达式时要用{}
3.样式的类名指定不要用class,要用className
4.内联样式要用style={{key:value}}的形式去写
5.只有一个根标签
6.标签必须闭合
7.标签首字母以大写开头就找组件,小写开头找html对应的同名标签

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .title {
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <!-- 准备好一个"容器 -->
    <div id="text"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        const myId = 'tiTle'/*随便弄个大小写不一致的*/
        const myData = 'HeLLo.REact'
        const VDOM = (
            <div>
                <h1 className="title" id={myId.toLowerCase()}>
                    <span style={{ color: '#fff', fontSize: '100px' }}>{myData.toLocaleUpperCase()}</span>
                </h1><h1 className="title" id={myId.toLocaleUpperCase()}>
                    <span style={{ color: '#fff', fontSize: '100px' }}>{myData.toLowerCase()}</span>
                </h1>
                <input />
            </div>)

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

在这里插入图片描述

3.1jsx小练习

jsx里面可以写表达式,但不是js语句
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式:

a
a+b
demo(1)
arr.map()
function test(){}

2.语句(代码):

if(){}
for(){}
switch(){}

 <script type="text/babel">
        const arr = ['杀生丸', '山竹', '小玲']
        const VDOM = (
            <ul>
                {
                    arr.map((item, index) => {
                        return <li key={'arr' + index}>{item}</li>
                    })
                }
            </ul>
        )
        ReactDOM.render(VDOM, document.getElementById('text'))
    </script>

在这里插入图片描述

4.函数式组件(适合简单)

执行render后发生了什么?
1.react解析组件便签,找到了Demo组件
2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中.
注意:
1.组件必须为大写开头,且有收尾符号

<script type="text/babel">
        function Demo() {
            console.log(this)//undefined,因为babel编译后开启了严格模式
            return <h1>函数式组件</h1>
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

5.类式组件(适合复杂)

必须继承react中内置的类

render是放在哪里的?—Demo的原型对象上,供实例使用
render中的this是谁?—Demo组件实例对象,react里面会调
执行了ReactDOM.render之后发生了审了?
1.React解析组件标签,找到Demo组件
2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法.
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面上

 <script type="text/babel">
        // 1.创建类式组件
        class Demo extends React.Component {
            render() {
                console.log(this)
                return <h2>类组件,你想输出的内容</h2>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

6.组件实例的三大核心属性(这里先学旧的,新的有hook,只是一步步记录老师教的)

都是类组件里面的

6.1state

对state的理解

什么是复杂组件|简单组件?
如果你的组件是有状态(state)的就是复杂组件,state是由组件实例对象生成的,函数没有
什么是状态?
组件实现过程就是数据>虚拟dom>真实dom,数据就是放在state中的,状态驱使页面

6.1.1初始化state

 <script type="text/babel">
        // 1.创建类式组件
        class Demo extends React.Component {
            constructor(props) {
                // 往state注入数据,super必须写在最前面
                super(props)
                this.state = {
                    isHot: false
                }
                console.log(this, 111)
            }
            render() {
                console.log(this, 222)
                return <h2>今天天气有点{this.state.isHot ? '炎热' : '凉爽'}</h2>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

6.1.2react中事件绑定

注意点:onClick中的C为大写,赋值函数的时候不要带(),否则会立即调用,必须用花括号包裹,否则会当字符串

<script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    isHot: false
                }
            }
            render() {
                return <h2 onClick={changeWeather}>今天天气有点{this.state.isHot ? '炎热' : '凉爽'}</h2>
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
        function changeWeather() {
            console.log('被点击了')
        }
    </script>

在这里插入图片描述

6.1.3类中方法中的this

类型的方法都开启了严格模式,并且,之前所说的this指的是组件实例调取的地方,但是现在如下图所写的changeWeather相当于赋值给了onClick,是直接调用,那么this就变成了undefined

在这里插入图片描述

6.1.4 解决类中this指向问题

<script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    isHot: false
                }
                console.log(this, '构造器中的this')
                //改变changeWeather的this指向,在执行下面这段代码时,先执行右侧的this.changeWeather
                //当构造器中没有changeWeather时,就会把它指向原型上的changeWeather(就是render下面那个)
                //找到后改变this指向,并在构造器中添加一个叫changeWeather的属性接收,当onClick被调用时就
                // 调用构造器中的这个,不会再往后找了
                this.changeWeather = this.changeWeather.bind(this)
            }
            render() {
                return <h2 onClick={this.changeWeather}>今天天气有点{this.state.isHot ? '炎热' : '凉爽'}</h2>
            }
            changeWeather() {
                console.log(this, '被点击了')
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))

    </script>

在这里插入图片描述

6.1.5 setState的使用

在react中不能直接更改state,需要内置的api叫setState,在类继承的React.Component的原型上,且更新是一种合并,不是替换

<script type="text/babel">
        class Demo extends React.Component {
            // 构造器调用几次?  - 1次
            constructor(props) {
                super(props)
                this.state = {
                    isHot: false
                }
                console.log(this, '构造器中的this')
                this.changeWeather = this.changeWeather.bind(this)
            }
            // render调用几次?  - 1+n次,初始一次,后面数据更新触发渲染几次就是几次
            render() {
                return <h2 onClick={this.changeWeather}>今天天气有点{this.state.isHot ? '炎热' : '凉爽'}</h2>
            }
            // changeWeather调用几次?  - 点几次调用几次
            changeWeather() {
                this.setState({
                    isHot: !this.state.isHot
                })
                console.log(this, '被点击了')
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))

    </script>

在这里插入图片描述

6.1.6state的简写方式

<script type="text/babel">
        class Demo extends React.Component {
            // 类可以直接写赋值语句,往Demo的实例里面添加一个属性,名为state,值为一个对象
            state = {
                isHot: false
            }
            render() {
                return <h2 onClick={this.changeWeather}>今天天气有点{this.state.isHot ? '炎热' : '凉爽'}</h2>
            }
            // 这个写法是匿名函数自身没有this,那它会往外层找,找到Demo的this
            changeWeather = () => {
                this.setState({
                    isHot: !this.state.isHot
                })
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))

    </script>

在这里插入图片描述

6.1.7 总结state

state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)
组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined,如何解决?
1.强制绑定this:通过函数对象的bind()
2.箭头函数
状态数据.不能直接修改或更新

6.2 props

6.2.1props的基本使用

<script type="text/babel">
        class Demo extends React.Component {
            render() {
                return (
                    <ul>
                        <li>姓名: {this.props.name}</li>
                        <li>性别: {this.props.gender}</li>
                        <li>年龄: {this.props.age}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Demo name='山竹' gender='女' age='18' />, document.getElementById('text'))

    </script>

在这里插入图片描述

6.2.2 批量传递props

这里的花括号不是对象,它是分隔符,正常我们是不能直接分解对象的,但react加babel就可以用展开运算符

<script type="text/babel">
        class Demo extends React.Component {
            render() {
                console.log(this)
                return (
                    <ul>
                        <li>姓名: {this.props.name}</li>
                        <li>性别: {this.props.gender}</li>
                        <li>年龄: {this.props.age}</li>
                    </ul>
                )
            }
        }
        const data = { name: '展开后的山竹', gender: '女', age: '18' }
        ReactDOM.render(<Demo  {...data} />, document.getElementById('text'))

    </script>

在这里插入图片描述

6.2.3 使用propTypes对props进行限制

注意propsTypes一个大写P与小写p,类型是小写开头,例如string,但是函数是func

情景:自定义用来显示一个人员信息的组件
1.姓名必须指定,且为字符串类型
2.姓名为字符串类型,如果性别没有指定,默认不男不女
3.年龄限制数字类型

<!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>
<script type="text/babel">
        class Demo extends React.Component {
            render() {
                console.log(this)
                return (
                    <ul>
                        <li>姓名: {this.props.name}</li>
                        <li>性别: {this.props.gender}</li>
                        <li>年龄: {this.props.age}</li>
                    </ul>
                )
            }
        }
        //对标签属性进行类型/必要性的限制
        Demo.propTypes = {
            name: PropTypes.string.isRequired,
            gender: PropTypes.string,
            age: PropTypes.number,
            run: PropTypes.func
        }
        // 指定默认标签属性值
        Demo.defaultProps = {
            gender: '不男不女'
        }
        const data = { name: '山竹', gender: '女', age: 18 }
        ReactDOM.render(<Demo  {...data} run={run} />, document.getElementById('text'))
        function run() {
            console.log('提桶')
        }
    </script>

6.2.4 props简写

 <script type="text/babel">
        class Demo extends React.Component {
            //添加static静态属性,给Demo类加,而不是给实例加
            static propTypes = {
                name: PropTypes.string.isRequired,
                gender: PropTypes.string,
                age: PropTypes.number,
                run: PropTypes.func
            }
            static defaultProps = {
                gender: '不男不女'
            }
            render() {
                console.log(this)
                return (
                    <ul>
                        <li>姓名: {this.props.name}</li>
                        <li>性别: {this.props.gender}</li>
                        <li>年龄: {this.props.age}</li>
                    </ul>
                )
            }
        }
        const data = { name: '山竹', gender: '女', age: 18 }
        ReactDOM.render(<Demo  {...data} run={run} />, document.getElementById('text'))
        function run() {
            console.log('提桶')
        }
    </script>

6.2.5类式组件中的构造器与props

构造器是否接受props,是否传递给super,取决于:是否希望在构造器中通过this访问props,但使用场景很少

 <script type="text/babel">
        class Demo extends React.Component {
            //构造器是否接受props,是否传递给super,取决于:是否希望在构造器中通过this访问props
            // constructor() {
            //     super()
            //     console.log(this.props, 222)
            // }
            constructor(props) {
                super(props)
                console.log(this.props, 222)
            }
            render() {
                return (
                    <ul>
                        <li>姓名: {this.props.name}</li>
                        <li>性别: {this.props.gender}</li>
                        <li>年龄: {this.props.age}</li>
                    </ul>
                )
            }
        }
        const data = { name: '山竹', gender: '女', age: 18 }
        ReactDOM.render(<Demo  {...data} />, document.getElementById('text'))
    </script>

6.2.6函数式组件使用props

上述所讲的this是指向实例中,但是函数式组件连实例都没有,理论上是无法玩三大属性的,但有特殊情况:函数能接收参数

  <script type="text/babel">
        function Demo(props) {
            console.log(props, 888)
            return (
                <ul>
                    <li>姓名: {props.name}</li>
                    <li>性别: {props.gender}</li>
                    <li>年龄: {props.age}</li>
                </ul>
            )
        }
        Demo.propTypes = {
            name: PropTypes.string.isRequired,
            gender: PropTypes.string,
            age: PropTypes.number,
            run: PropTypes.func
        }
        Demo.defaultProps = {
            gender: '不男不女'
        }
        const data = { name: '山竹', gender: '女', age: 18 }
        ReactDOM.render(<Demo  {...data} />, document.getElementById('text'))
    </script>

在这里插入图片描述

6.3 ref

一个标识,类似id

6.3.1字符串形式的refs(不太推荐)

跟vue差不多,就是没有$,还有记得事件是重新封装过的,要驼峰

<script type="text/babel">
        class Demo extends React.Component {
            showinput1 = () => {
                alert(this.refs.input1.value, '左边input1')
            }
            showinput2 = () => {
                alert(this.refs.input2.value, '右边input2')
            }
            render() {
                return (
                    <div>
                        <input ref='input1' type="text" />
                        <button onClick={this.showinput1}>点击左侧input</button>
                        <input ref='input2' onBlur={this.showinput2} type="text" />
                    </div>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

6.3.2 回调形式的refs(react推荐写法)

回调由实例调用,this也指向实例,回调的参数为当前节点,创建的变量也在实例上

<script type="text/babel">
        class Demo extends React.Component {
            showinput1 = () => {
                alert(this.input1.value, '左边input1')
            }
            showinput2 = () => {
                alert(this.input2.value, '右边input2')
            }
            render() {
                return (
                    <div>
                        <input ref={c => this.input1 = c} type="text" />
                        <button onClick={this.showinput1}>点击左侧input</button>
                        <input ref={c => this.input2 = c} onBlur={this.showinput2} type="text" />
                    </div>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

6.3.2回调ref中调用次数问题

这是类绑定写法,平时写内联就可以了

在这里插入图片描述


    <script type="text/babel">
        class Demo extends React.Component {
            state = { isHot: true }
            showinput1 = () => {
                alert(this.input1.value, '左边input1')
            }
            /**模拟更新时触发的null*/
            changeWeather = () => {
                this.setState({ isHot: !this.state.isHot })
            }
            changeInfo = (c) => {
                console.log('@', c)
                this.input1 = c
            }

            render() {
                return (
                    <div>
                        <h2>今天天气很{this.state.isHot ? '炎热' : '寒冷'}</h2>
                        {/*<input ref={c => { this.input1 = c, console.log('@', c) }} type="text" />//@,null*/}
                        <input ref={this.changeInfo} type="text" />
                        <button onClick={this.showinput1}>点击左侧input</button>
                        <button onClick={this.changeWeather}>切换天气</button>
                    </div>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

6.3.3 createRef的使用(最推荐)

它是把ref所在的节点存储到创建的容器里面

<script type="text/babel">
        class Demo extends React.Component {
            // React.createRef调用后可以返回一个容器,该容器可以储存被ref所标识的节点,该容器时"专人专用"的
            input1 = React.createRef()
            showinput1 = () => {
                console.log(this.input1)
                alert(this.input1.current.value)
            }

            render() {
                return (
                    <div>
                        <input ref={this.input1} type="text" />
                        <button onClick={this.showinput1}>点击左侧input</button>
                    </div>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

7.react中的事件处理

1.通过onXxx属性指定事件处理属性(注意大小写)

React使用的是自定义(合成)事件,而不是使用原生DOM事件——为了更好兼容
React中的事件时通过事件委托方式处理的（委托给组件最外层元素）——为了高效

2.通过event.target得到发生事件的DOM元素对象——不要过度使用ref

<script type="text/babel">
        class Demo extends React.Component {
            showinput1 = (event) => {
                alert(event.target.value)
            }

            render() {
                return (
                    <div>
                        <input onBlur={this.showinput1} type="text" />
                    </div>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

8.收集表单数据

8.1非受控组件

现用现取就是非受控

<script type="text/babel">
        class Demo extends React.Component {
            handleSubmit = (event) => {
                event.preventDefault()//组织表单提交,不重要,只是方便观看
                alert(this.userName.value, '99', this.passWord.value)
            }

            render() {
                return (
                    <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                        用户名:<input type="text" ref={c => this.userName = c} name="userName" />
                        密码:<input type="passWord" ref={c => this.passWord = c} name="passWord" />
                        <button>提交</button>
                    </form>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

8.2受控组件(推荐)

随着输入维护状态就是受控,类似vue的双向数据绑定
这种写法可以少写ref,React建议少写ref

<script type="text/babel">
        class Demo extends React.Component {
            // 初始值
            state = {
                userName: '',
                passWord: ''
            }
            handleSubmit = (event) => {
                event.preventDefault()//组织表单提交
                alert(`${this.state.userName}, '99', ${this.state.passWord}`)
            }
            saveUserName = (event) => {
                this.setState({ userName: event.target.value })
            }
            savePassWord = (event) => {
                this.setState({ passWord: event.target.value })
            }
            render() {
                return (
                    <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                        用户名:<input type="text" onChange={this.saveUserName} name="userName" />
                        密码:<input type="passWord" onChange={this.savePassWord} name="passWord" />
                        <button>提交</button>
                    </form>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

9.高阶函数_函数柯里化

高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：下面例子、promise、Array.map、setTimeout等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
下面这种写法等同于调取saveFormData里面return的函数,如果只是写括号传参字符串,那么赋值给react的是值而不是回调,在初始的时候就会调用,其他你input框改变的时候并没有调回调.
就是必须拿一个函数作为回调的意思

 <script type="text/babel">
        class Demo extends React.Component {
            // 初始值
            state = {
                userName: '',
                passWord: ''
            }
            handleSubmit = (event) => {
                event.preventDefault()//组织表单提交
                alert(`${this.state.userName}, '99', ${this.state.passWord}`)
            }
            saveFormData = (state) => {
                return (event) => {
                    this.setState({ [state]: event.target.value })
                }
            }
            render() {
                return (
                    <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                        用户名:<input type="text" onChange={this.saveFormData('userName')} name="userName" />
                        密码:<input type="passWord" onChange={this.saveFormData('passWord')} name="passWord" />
                        <button>提交</button>
                    </form>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

非柯里化方式实现

 <script type="text/babel">
        class Demo extends React.Component {
            // 初始值
            state = {
                userName: '',
                passWord: ''
            }
            handleSubmit = (event) => {
                event.preventDefault()//组织表单提交
                alert(`${this.state.userName}, '99', ${this.state.passWord}`)
            }
            saveFormData = (state, event) => {
                this.setState({ [state]: event.target.value })
            }
            render() {
                return (
                    <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                        用户名:<input type="text" onChange={event => this.saveFormData('userName', event)} name="userName" />
                        密码:<input type="passWord" onChange={event => this.saveFormData('passWord', event)} name="passWord" />
                        <button>提交</button>
                    </form>

                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.组件生命周期

10.1引出生命周期

需求:
1.页面挂载时标题透明度从1开始2秒内变为0
2.为0的时候立刻透明度变回1
3.点击按钮删除组件

改状态就会触发render,所以定时器不能放render并且更改state,否则会递归

组件挂载完毕固定函数unmountComponentAtNode,卸载前固定写法componentWillUnmount

<script type="text/babel">
        class Demo extends React.Component {
            state = {
                opacity: 1
            }
            death = () => {
                // 1.卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('text'))
            }
            // 2.组件挂载完毕
            componentDidMount() {
                this.timer = setInterval(() => {
                    let opacity = this.state.opacity//获取原状态
                    opacity -= 0.1//慢慢减淡
                    if (opacity <= 0) opacity = 1 //如果为负值重新赋值1
                    this.setState({ opacity })
                }, 200)
            }
            // 3.卸载之前
            componentWillUnmount() {
                clearInterval(this.timer)
            }
            render() {
                return (
                    <div>
                        <h1 style={{ opacity: this.state.opacity }}>标题:我要慢慢变淡</h1>
                        <button onClick={this.death}>删除组件</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.2 生命周期(旧)

10.2.1组件挂载流程

在这里插入图片描述

10.2.1.1 挂载时

 <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                console.log('constructor')
                super(props)
            }
            //1.组件挂载之前
            componentWillMount() {
                console.log('componentWillMount')
            }

            // 3.组件挂载完毕
            componentDidMount() {
                console.log('componentDidMount')
            }
            // 4.卸载之前
            componentWillUnmount() {
                console.log('componentWillUnmount')
            }
            //2.渲染
            render() {
                console.log('render')
                return (
                    <div>
                        随便
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.2.1.2setState过程

 <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                console.log('constructor')
                super(props)
            }
            state = {
                count: 1
            }

            add = () => {
                this.setState({ count: this.state.count+1 })
            }

            //1.控制是否执行更新,默认会调这个方法为true,但如果自定义的话一定要写返回值,且为布尔
            shouldComponentUpdate() {
                console.log('shouldCompoentUpdate')
                return true
                // return false
            }

            //2.组件即将更新
            componentWillUpdate() {
                console.log('componentWillUpdate')
            }

            // 4.组件更新完毕
            componentDidUpdate() {
                console.log('componentDidMount')
            }
            //3.渲染
            render() {
                console.log('render')
                return (
                    <div>
                        <h1>{this.state.count}</h1>
                        <button onClick={this.add}>加一</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.2.2.3forceUpdate()

 <script type="text/babel">
        class Demo extends React.Component {
            constructor(props) {
                console.log('constructor')
                super(props)
            }
            state = {
                count: 1
            }
            //1.组件即将更新
            componentWillUpdate() {
                console.log('componentWillUpdate')
            }

            // 3.组件更新完毕
            componentDidUpdate() {
                console.log('componentDidUpdate')
            }
            //2.渲染
            render() {
                console.log('render')
                return (
                    <div>
                        <h1>{this.state.count}</h1>
                        <button onClick={() => this.forceUpdate()}>不更改任何状态中的数据,强制更新一下</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.2.2.4 父组件render流程

componentWillReceiveProps初次接收props不触发

 <script type="text/babel">
        class Demo extends React.Component {
            state = { home: '侨鑫汇悦台' }
            changeHome = () => {
                this.setState({ home: '汤臣一号' })
            }
            render() {
                return (
                    <div>
                        <h1>我是父组件</h1>
                        <button onClick={this.changeHome}>换房</button>
                        <Demo2 home={this.state.home} />
                    </div>
                )
            }
        }
        class Demo2 extends React.Component {
            // 1.props改变的时候触发,初次不调用
            componentWillReceiveProps(props) {
                console.log('Demo2--componentWillReaceiveProps', props)
            }
            //2.是否要更新
            shouldComponentUpdate() {
                console.log('Demo2--shouldComponentUpdate')
                return true
            }
            // 3.准备更新了
            componentWillUpdate() {
                console.log('Demo2--componentWillUpdate')
            }
            // 5.更新完毕
            componentDidUpdate() {
                console.log('Demo2--componentDidUpdate')
            }
            // 4.更新
            render() {
                console.log('Demo2--render')
                return (
                    <div>
                        <h1>{this.props.home}</h1>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.2.2.5总结

初始化阶段:由ReactDom.render()触发—初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount
更新阶段:由组件内部this.setState()或父组件render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.componentDidUpdate()
卸载组件:由ReactDOM.UnmountComponentAtNode()触发
1.componentWillUnmount()

10.2对比新旧生命周期

即将废弃三个钩子,新增两个.
1.componentWillMount、componentWillReceiveProps、componentWillUpdate这三个即将废弃,且目前最新写法是前面加UNSAFE_,例如UNSAFE_componentWillMount
2.新增getDerivedStateFromProps、getSnapshotBeforeUpdate

在这里插入图片描述

10.3生命周期(新)

10.3.1getDerivedStateFromProps(没什么机会用)

state从props得到一个派生,即state的值在任何时候都取决于props,且无法更改得这种写法会让代码变得冗余

 <script type="text/babel">
        class Demo extends React.Component {
            constructor() {
                console.log('1,constructor')
                super()
            }
            static getDerivedStateFromProps(props) {
                console.log('2.getDerivedStateFromProps')
                // return null //没事发生
                return props
            }
            componentDidMount() {
                console.log('4.componentDidMount')
            }
            state = { count: 2 }
            add = () => {
                this.setState({ count: this.state.count + 1 })
            }
            render() {
                console.log('3.render')
                return (
                    <div>
                        <h1>{this.state.count}</h1>
                        <button onClick={this.add}>加1</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo count={999} />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.3.2getSnapshotBeforeUpdate(不常见)

在更新之前获取快照

<script type="text/babel">
        class Demo extends React.Component {
            constructor() {
                console.log('1,constructor')
                super()
            }
            static getDerivedStateFromProps(props) {
                console.log('2.getDerivedStateFromProps')
                return null //没事发生
                // return props
            }
            getSnapshotBeforeUpdate() {
                console.log('4.getSnapshotBeforeUpdate')
                // return null
                return '随便传什么都行'
            }
            componentDidUpdate(preProps, preState, snapashotValue) {
                console.log('5.componentDidMount')
                console.log('更新之前的props:', preProps)
                console.log('更新之前的state:', preState)
                console.log(`快照:${snapashotValue}`)
            }
            state = { count: 1 }
            add = () => {
                this.setState({ count: this.state.count + 1 })
            }
            render() {
                console.log('3.render')
                return (
                    <div>
                        <h1>{this.state.count}</h1>
                        <button onClick={this.add}>加1</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo count={999} />, document.getElementById('text'))
    </script>

在这里插入图片描述

10.3.3总结

在这里插入图片描述

山竹回家了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react入门（html形式学习）

react特点:1.采用组件化模式、声明式编程，提高开发效率及组件复用率。2.在React Native中可以使用React语法进行移动端开发。3.使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互.一、入门1.初识react案例2.虚拟dom的两种创建方式2.1用jsx实现用这种写法,其实最终也是转译成2.2js那种写法的,jsx就相当于2.2的js写法的语法糖<body>  &l.
复制链接

扫一扫