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

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

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

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

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

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

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

React典型面试题举例

• React组件如何通讯

• JSX本质是什么？

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

• shouldComponentUpdate的用途

• 描述redux单项数据流

• setState是同步还是异步？

  

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
    }
复制代码

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 进行属性设置，这样违反不可变值
复制代码

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 单个组件生命周期

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前端基础、工程化、面试的前端公众号，偶尔也会发发生活