React基本使用你都掌握了么?

·  阅读 1305

React基本使用你都掌握了么?

基本使用——常用,必须会

高级特性——不常用,但体现深度,下篇文章会复习【React高级特性】

Hooks——常用,必须会,前面已分享过基础【React Hooks基本使用详解

Redux和React-router使用,后续文章也会介绍【Redux和React-router使用】

老规矩先来看几个常考的react基础面试题:

React典型面试题举例

  • React组件如何通讯

  • JSX本质是什么?

  • context是什么?有什么用途?

  • shouldComponentUpdate的用途

  • 描述redux单项数据流

  • setState是同步还是异步?

    image-20211117005444855

1.JSX语法

  • 变量、表达式
  • class style
  • 子元素和组件
const rawHtml='<span>富文本内容<i>斜体</i></span>'
const rawHtmlData={
  __html:rawHtml//注意,必须是这种格式
}
// <p>{rawHtml}</p> 这种渲染出来的是字符串不对
const rawHtmlElem=<div>
      <p dangerouslySetInnerHTML={rawHtmlData}></p>
			<p>{rawHtml}</p>
</div>
return rawHtmlElem
复制代码

2.条件

  • If else
  • 三元表达式
  • 逻辑运算符 && ||

3.列表渲染

  • map 返回新数组,不改变原数组
  • key

4.事件

4.1 bind this

  • this默认是undefined ,通过bind改变this指向;this.clickHandler = this.clickHandler.bind(this)

  • 静态方法,this 指向当前实例

clickHandler2 = () => {

this.setState({

name: 'lisi'

})

}

4.2 关于 event参数

// event
       return <a href="https://imooc.com/" onClick={this.clickHandler3}>
           click me
       </a>
       
      // 获取 event
   clickHandler3 = (event) => {
       event.preventDefault() // 阻止默认行为 跳转
       event.stopPropagation() // 阻止冒泡
       console.log('target', event.target) // 指向当前元素,即当前元素触发
       console.log('current target', event.currentTarget) // 指向当前元素,假象!!!
 
       // 注意,event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent 组合事件
       console.log('event', event) // 不是原生的 Event ,原生的 MouseEvent
       console.log('event.__proto__.constructor', event.__proto__.constructor)
 
       // 原生 event 如下。其 __proto__.constructor 是 MouseEvent
       console.log('nativeEvent', event.nativeEvent)
       console.log('nativeEvent target', event.nativeEvent.target)  // 指向当前元素,即当前元素触发
       console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 指向 document !!!
   }
复制代码
  1. event 是 SyntheticEvent ,模拟出来 DOM 事件所有能力
  2. event.nativeEvent 是原生事件对象
  3. 所有的事件,都被挂载到 document 上
  4. 和 DOM 事件不一样,和 Vue 事件也不一样

传递自定义参数

// 传递参数 - 用 bind(this, a, b)
        return <ul>{this.state.list.map((item, index) => {
            return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}>
                index {index}; title {item.title}
            </li>
        })}</ul>
        // 传递参数
    clickHandler4(id, title, event) {
        console.log(id, title)
        console.log('event', event) // 最后追加一个参数,即可接收 event
    }
复制代码

image-20210817002649935

4.3 表单

受控组件

return <div>
            <p>{this.state.name}</p>
            <label htmlFor="inputName">姓名:</label> {/* 用 htmlFor 代替 for */}
            <input id="inputName" value={this.state.name} onChange={this.onInputChange}/>
        </div>
复制代码

5.父子组件通讯-组件和props(类型检查)

import React from 'react'
import PropTypes from 'prop-types'

//子组件 
class Input extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: ''
        }
    }
    render() {
        return <div>
            <input value={this.state.title} onChange={this.onTitleChange}/>
            <button onClick={this.onSubmit}>提交</button>
        </div>
    }
    onTitleChange = (e) => {
        this.setState({
            title: e.target.value
        })
    }
    onSubmit = () => {
        const { submitTitle } = this.props
        // 子组件调用父组件方法并更新父组件中的数据
        submitTitle(this.state.title) // 'abc'

        this.setState({
            title: ''
        })
    }
}
// props 类型检查
Input.propTypes = {
    submitTitle: PropTypes.func.isRequired
}

// 子组件
class List extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        const { list } = this.props

        return <ul>{list.map((item, index) => {
            return <li key={item.id}>
                <span>{item.title}</span>
            </li>
        })}</ul>
    }
}
// props 类型检查
List.propTypes = {
    list: PropTypes.arrayOf(PropTypes.object).isRequired
}

// 子组件
class Footer extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <p>
            {this.props.text}
            {this.props.length}
        </p>
    }
    componentDidUpdate() {
        console.log('footer did update')
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.text !== this.props.text
            || nextProps.length !== this.props.length) {
            return true // 可以渲染
        }
        return false // 不重复渲染
    }

    // React 默认:父组件有更新,子组件则无条件也更新!!!
    // 性能优化对于 React 更加重要!
    // SCU 一定要每次都用吗?—— 需要的时候才优化
}

// 父组件
class TodoListDemo extends React.Component {
    constructor(props) {
        super(props)
        // 状态(数据)提升
        this.state = {
            list: [
                {
                    id: 'id-1',
                    title: '标题1'
                },
                {
                    id: 'id-2',
                    title: '标题2'
                },
                {
                    id: 'id-3',
                    title: '标题3'
                }
            ],
            footerInfo: '底部文字'
        }
    }
    render() {
        return <div>
            <Input submitTitle={this.onSubmitTitle}/>
            <List list={this.state.list}/>
            <Footer text={this.state.footerInfo} length={this.state.list.length}/>
        </div>
    }
    // 父组件方法
    onSubmitTitle = (title) => {
        this.setState({
            list: this.state.list.concat({
                id: `id-${Date.now()}`,
                title
            })
        })
    }
}

export default TodoListDemo

复制代码

6.state和setState

6.1 不可变值

第一,state 要在构造函数中定义

constructor(props) {
        super(props)

        // 第一,state 要在构造函数中定义
        this.state = {
            count: 0
        }
    }
复制代码

第二,不要直接修改 state ,使用不可变值

// this.state.count++ // 错误
this.setState({
            count: this.state.count + 1 // SCU
        })
复制代码

操作数组、对象的的常用形式

setState为何使用不可变值?

不能提前对setState值进行修改,而是我们要什么时候改的时候就什么时候设置,而且设置的时候不能影响到以前的值。

// 不可变值(函数式编程,纯函数) - 数组
const list5Copy = this.state.list5.slice()
list5Copy.splice(2, 0, 'a') // 中间插入/删除
this.setState({
    list1: this.state.list1.concat(100), // 追加
    list2: [...this.state.list2, 100], // 追加
    list3: this.state.list3.slice(0, 3), // 截取
    list4: this.state.list4.filter(item => item > 100), // 筛选
    list5: list5Copy // 其他操作
})
// 注意,不能直接对 this.state.list 进行 push pop splice 等,这样违反不可变值

// 不可变值 - 对象
this.setState({
    obj1: Object.assign({}, this.state.obj1, {a: 100}),
    obj2: {...this.state.obj2, a: 100}
})
// 注意,不能直接对 this.state.obj 进行属性设置,这样违反不可变值
复制代码

image-20210817011619998

6.2 可能是异步更新

setState是同步还是异步?

setState 可能是异步更新(有可能是同步更新)

  • setTimeout 中 setState 是同步的
  • 自己定义的 DOM 事件,setState 是同步的
 // 第三,setState 可能是异步更新(有可能是同步更新) ----------------------------
        
        this.setState({
            count: this.state.count + 1
        }, () => {
            // 联想 Vue $nextTick - DOM
            console.log('count by callback', this.state.count) // 回调函数中可以拿到最新的 state
        })
        console.log('count', this.state.count) // 异步的,拿不到最新值



        // setTimeout 中 setState 是同步的
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            })
            console.log('count in setTimeout', this.state.count)
        }, 0)



        // 自己定义的 DOM 事件,setState 是同步的。再 componentDidMount 中
componentDidMount() {
        // 自己定义的 DOM 事件,setState 是同步的
        document.body.addEventListener('click', this.bodyClickHandler)
    }
bodyClickHandler = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log('count in body event', this.state.count)
    }
componentWillUnmount() {
        // 及时销毁自定义 DOM 事件
        document.body.removeEventListener('click', this.bodyClickHandler)
        // clearTimeout
    }
复制代码

6.3 可能会被合并

异步情况下,传入对象,会被合并(类似 Object.assign )。执行结果只一次 +1

this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
// 1 2 3 4 5 6
复制代码

传入函数,不会被合并。就会一个一个执行

this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })

// 3 6 9 12 ....
复制代码

7.组件生命周期

组件生命周期图

7.1 单个组件生命周期

image-20210817231211552

image-20210817231443170

7.2 多个组件之间生命周期

多个组件之间生命周期呢?比如父子组件?兄弟组件?各个周期又是什么样的?异步路由的情况呢? Hooks的 呢?

  1. 同步路由,父组件在 render 阶段创建子组件。
  2. 异步路由,父组件在自身挂载完成之后才开始创建子组件。
  3. 挂载完成之后,在更新时,同步组件和异步组件是一样的。
  4. 无论是挂载还是更新,以 render 完成为界,之前父组件先执行,之后子组件先执行。
  5. 兄弟组件大体上按照在父组件中的出场顺序执行。
  6. useEffect 会在挂载/更新完成之后,延迟执行。
  7. 异步请求(如访问 API)何时得到响应与组件的生命周期无关,即父组件中发起的异步请求不保证在子组件挂载完成前得到响应。

7.2.1 挂载过程

父子组件的挂载分为三个阶段。

第一阶段,父组件执行到自身的 render,解析其下有哪些子组件需要渲染,并对其中同步的子组件进行创建,挨个执行各组件到 render,生成到目前为止的 Virtual DOM 树,并 commit 到 DOM。

第二阶段,此时 DOM 节点已经生成完毕,组件挂载完成,开始后续流程。先依次触发同步子组件各自的 componentDidMount / useLayoutEffect,最后触发父组件的。

第三阶段,如果组件使用了 useEffect,则会在第二阶段之后触发 useEffect。如果父子组件都使用了 useEffect,那么子组件先触发,然后是父组件。

如果父组件中包含异步子组件,则会在父组件挂载完成后被创建。

对于兄弟组件,如果是同步路由,它们的创建顺序和在父组件中定义的出场顺序是一致的。

如果组件的初始化过程包含异步操作(通常在 componentDidMount()useEffect(fn, []) 中进行),这些操作何时得到响应与组件的生命周期无关,完全看异步操作本身花了多少时间。

7.2.2 更新过程

React 的设计遵循单向数据流模型,兄弟节点之间的通信也会经过父组件(Redux 和 Context 也是通过改变父组件传递下来的 props 实现的),因此任何两个组件之间的通信,本质上都可以归结为父组件更新导致子组件更新的情况。

父子组件的更新同样分为三个阶段。

第一、三阶段,和挂载过程基本一样,无非是第一阶段多了一个 Reconciliation 的过程,第三阶段需要先执行 useEffect 的 Cleanup 函数。

第二阶段,和挂载过程也很类似,都是子组件先于父组件,但更新比挂载涉及的函数要多一些:

  1. getSnapshotBeforeUpdate()
  2. useLayoutEffect() 的 Cleanup
  3. useLayoutEffect() / componentDidUpdate()

React 会按照上面的顺序依次执行这些函数,每个函数都是各个子组件的先执行,然后才是父组件的执行。具体说来,就是先执行各个子组件的 getSnapshotBeforeUpdate(),然后是父组件的 getSnapshotBeforeUpdate(),再然后是各个子组件的 componentDidUpdate(),父组件的 componentDidUpdate(),以此类推。

这里我们把类组件和 Hooks 的生命周期函数放在了一起,因为父子组件可以是这两种组件类型的任意排列组合。实际渲染时不一定每一个函数都有用到,只会调用组件实际拥有的函数。

7.2.3 卸载过程

卸载过程涉及到 componentWillUnmount()useEffect() 的 Cleanup、useLayoutEffect() 的 Cleanup 这三种函数,顺序固定为父组件的先执行,子组件按照在 JSX 中定义的顺序依次执行各自的方法。

注意,此时的 Cleanup 函数会按照在代码中定义的顺序先后执行,与函数本身的特性无关。

如果卸载旧组件的同时伴随有新组件的创建,新组件会先被创建并执行完 render,然后卸载不需要的旧组件,最后新组件执行挂载完成的回调。

7.3 Hooks 生命周期的特别之处

根据 React 的官方文档,useEffect()useLayoutEffect() 都是等效于 componentDidUpdate() / componentDidMount() 的存在,但实际上两者在一些细节上还是有所不同:

7.31 先来未必先走

useLayoutEffect() 永远比 useEffect() 先执行,即便在你的代码中 useEffect() 是写在前面的。所以 useLayoutEffect() 才是事实上和 componentDidUpdate() / componentDidMount() 平起平坐的存在。

useEffect() 会在父子组件的 componentDidUpdate() / componentDidMount() 都触发之后才被触发。当父子组件都用到 useEffect() 时,子组件中的会比父组件中的先触发。

7.32 不团结的 Cleanup

同样都拥有 Cleanup 函数,useLayoutEffect() 和它的 Cleanup 未必是挨着的。

当父组件是 Hooks、子组件是 Class 时,能够很明显看出,useLayoutEffect() 的 Cleanup 会在 getSnapshotBeforeUpdate()componentDidUpdate() 之间被调用,而 useLayoutEffect() 则是和 componentDidUpdate() 同级,按照更新过程的顺序被调用。

Hooks 作为子组件时也是这么个过程,只是没有了子组件,看上去不那么明显罢了。

useEffect() 就不一样,它和它的 Cleanup 紧密团结在一起,每次执行都是前后脚一起的,从不分离。

感谢阅读

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

关注公众号小圆脸儿,一个专注于web前端基础、工程化、面试的前端公众号,偶尔也会发发生活

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改