React面试题整理(1)

1、element和component的区别，也就是元素和组件的区别
组件分为函数组件和类组件，两者除了写法上的不同之外，最大的区别在于类组件可以声明state，也就是说，类组件有自己的内部状态，但是在函数组件中不能声明state。但是React Hooks的出现，使函数组件也可以拥有自己的状态。那么element和component的区别也就不难理解。组件有输入输出，有返回值（JSX）,而组件返回的就是React元素，也就是element。组件接受的props以及自身的state则决定了element如何进行展现。通俗来说，element决定了我们在屏幕上看到什么。element是React实现界面内容的最小单元。

2、受控组件与非受控组件的区别
受控组件顾名思义就是收到控制的组件，受谁控制，React。那么React怎么控制组件，state。回顾源码解释：

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

简单来说就是，表单中（注意是表单中！）有一些例如input的标签，他们内部有自己的状态（value），输入即呈现。而React也有状态，就是state，将Input自身的状态和state关联起来，使input的状态受state的控制，就是受控组件。大致就是这种方式：

<input type="text" value={this.state.value} onChange={this.handleChange} />;

  handleChange(event) {
    this.setState({value: event.target.value});
  }

那么非受控组件，就是表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）大致是这种方式：

<input type="text" ref={this.input} />

那么有一个细节，既然input已经不受props和state的控制，那么它怎么设置初始值，可以通过defaultValue设置初始值

<input type="text" ref={this.input} defaultValue='Bob'/>

这里使用了ref,请看下文。。。

3、React中的 refs是什么，怎么用？
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。通常情况下我们修改一个组件，需要用新的props来渲染它。但是如果我们不想通过props而是直接对DOM进行操作的话，就可以使用refs。接下来介绍一下使用流程：
首先要创建一个Refs，注意是在constructor中创建的（函数组件无法使用refs,因为他们没有实例）

 constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

前面说过，refs是用来直接操作DOM的，那创建完了之后自然要和DOM元素联系在一起，注意是在render中

  render() {
    return <div ref={this.myRef} />;
  }

和DOM联系在一起之后，下一个问题就是如何进行访问，对该节点的引用可以在ref的current属性中访问到

const node = this.myRef.current;