持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

今天是六月份更文活动第一天，最近都在写vue、angular项目，react基础的知识有些遗忘，所以索性带大家回顾一下react知识，同时起到巩固作用。

1.`setState`异步与同步问题

setState是我们最常用的更改状态的方法，那么setState到底是同步还是异步，其实是一个较为复杂的问题。准确是说 setState 只在合成事件（指react封装的事件，如onClick等）和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的。
用简单的话说就是：
（1）在同步任务中，setState异步更新数据及dom节点，等待任务执行结束，合并数据对象。
（2）在异步任务中，setState同步更新数据及dom节点，如settimeout、axios.then异步。

setState提供回调函数，可以获取到更新后的数据及dom节点

    setState({},()=>{
            // 获取更新后内容
    })

推荐大家看一篇文章你真的理解setState吗？

2.获取实例对象 `ref`绑定

在开发过程中，特别是类组件中，有时我们需要获取某些实例值如react，或者是获取子组件的方法或者属性，这种时候就可以使用ref绑定，不同于vue2，只需要绑定ref，使用this.$refs获取即可，react需要使用createRef创建Refs,并通过ref绑定组件，如果是类组件，ref绑定的值会指向类组件实例，从而获取实例上的属性与方法

（1）绑定实例

myref=React.createRef()

<input ref={this.myref} />

（2）获取实例值

this.myref.current.value

3.`props`属性

实际开发中，其实最常用的就是父子组件之间的通信，获取props等。本文回顾一下类组件、函数组件的传参接参过程，以及参数的验证。

类组件:

（1）类组件属性传入与解析

//使用组件时传入属性
<Movie title='movie' isshow={true}></Movie>

//组件内解析属性
import * as React from 'react';
export default class Movie extends React.Component{
    render() {
        const {title,isshow}=this.props
        console.log(title,isshow)
        return (
            <div>
                电影
            </div>
        );
    };
};

（2）类组件属性类型验证

使用prop-types做类型判断使用类属性 propTypes做类型验证

import * as React from 'react';
// 类型判断工具
import typeCheck from 'prop-types'
export default class Movie extends React.Component{
    // 类型检查
    static propTypes={
        title:typeCheck.string,
        isshow:typeCheck.bool
    }
    render() {
        const {title,isshow}=this.props
        console.log(this.props)
        return (
            <div>
                电影
            </div>
        );
    };
};

将传入isshow属性设为字符串，属性类型检查将报错

捕获.PNG (3)设置默认属性

staic defaultProps={
    isshow:false
}

（4）利用es6进行属性展开，如果传入属性名与接收属性名相同，可以解构对象传入

var obj={title:'movie',isshow:false}

<Movie {...obj}></Movie>

函数式组件:

（1）函数式组件属性

export default function demo(props){
        // 接收参数 props
}

（2）函数式组件属性类型检查及属性默认值

export default function demo(props){
        // 接收参数 props
}
demo.propTypes={
}
demo.defaultProps={
}

4.表单受控组件与非受控组件

（1）非受控组件

所谓非受控组件，就是可以使用ref来获取DOM节点实例，获取表单数据。 （2）受控组件 在HTML中，表单元素（如<input>、<textarea>、<select>）通常自己维护state，并根据用户输入进行更新，而在React中，可变状态（mutable state）通常保存在组件的state属性中，并且只能通过setState（）更新，我们结合两者，使React的state成为唯一数据源。渲染表单的React组件还控制着用户输入过程表单发生的操作，被React以这种方式控制取值的表单输入元素就叫做“受控组件”

state={
    name:'test'
}

<input  type='text' value={this.state.name} onChange=((event)=>{
    this.setState({
       name:e.target.value
   })
}) />

5.插槽

（1）插槽有哪些优势：

复用度高，插槽可以实现组件的封装使用，并能够灵活使用不同的需求。
减少一定程度父子通信，通过使用插槽，部分内容可以留在父组件中，可以直接调用，减少了父子通信。
高阶组件的处理，可以使用插槽对子组件进行包裹处理，传入参数等。 （2）插槽的使用
匿名插槽
在子组件中，使用this.props.children拿到插槽传入的组件内容，并展开渲染。

import React, {Component} from 'react';
class Child extends Component{
    render() {
        return (
            <div>
                {this.props.children}
            </div>

        );
    }
}
class Slot extends Component {
    render() {
        return (
            <div>
                <Child>
                    <div>子1111</div>
                    <div>子2222</div>
                    <div>子3333</div>
                </Child>
            </div>
        );
    }
}

export default Slot;

具名插槽
使用this.props.children可以决定插槽中具体展示哪些获取的组件内容

import React, {Component} from 'react';
class Child extends Component{
    render() {
        return (
            <div>
                <span>全部展示</span>
                {this.props.children}
                <span>具名插槽</span>
                {this.props.children[2]}
                {this.props.children[1]}
                {this.props.children[0]}
            </div>

        );
    }
}

6.`dangerouslySetInnerHTML`富文本解析渲染

富文本解析渲染其实较为少用，但是如果希望能够将富文本数据渲染到标签中，可以使用dangerouslySetInnerHTML,注意html前是双下划线_。

state={
    content:'<b>富文本渲染</b>'
}
<div dangerouslySetInnerHTML={
    {
        __html:this.state.content
    }
}>

</div>

浅谈React的一些基础问题

前言

1.setState异步与同步问题

2.获取实例对象 ref绑定

3.props属性