开始学习React啦（四）

一、ref

ref 的值根据节点的类型而有所不同：

当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素
当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例
函数组件上没有使用 ref 属性，因为他们没有实例

创建ref的形式有两种：

回调形式
React.createRef()

回调形式

在以前版本中，ref会使用回调的形式进行编写

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = null;
    }

    render() {
        return (
                <input type="text" ref={this.setTextInputRef} />
        );
    }
}

React.createRef()

使用这种形式，DOM节点或者组件实例对象都会存放在current属性上

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); 
  }
  render() {
    return <div ref={this.myRef} />;  }
}

二、dangerouslySetInnerHTML属性

从名字上来看，这是一个危险的属性

下面举个例子

设置一个data变量，其中里面包含了标签的字符串形式

let data = `<div class="markdown-text"><h1>InnerHTML</h1><p>请大家遵守法律法规，勿发布不合规内容。</p></div>`;

直接将其渲染在页面

class App extends Component {
    render() {
        return (
            <div>{data}</div>
        )
    }
}

会发现页面把标签的字符串原班不动的展现出来了，那是因React做了预防跨站脚本（XSS）攻击，把一些敏感的符号进行了转义

如果想要把data中如div的字眼以标签的形式展现出来，需要用到dangerouslySetInnerHTML

class App extends Component {
  render() {
    return <div
      dangerouslySetInnerHTML={{
        __html:data
      }}
    ></div>
  }
}

或者使用原生的innerHtml属性

class App extends Component {
  render() {
    return <div ref={(node)=>{
      node.innerHTML = data;
    }}></div>
  }
}

三、函数式组件

在16.7之前，函数式组件也叫做无状态组件、纯渲染组件，原因是因为其内部没有state状态，也没有生命周期

形式如下

function 组件名(props){
    return 构建的虚拟DOM
}

但自从出现了hook，且React官方也推荐大家函数式组件编程，函数式组件变得越来越强大，能够处理类组件所能完成的功能，且更加简单、高效