撩课-Web大前端每天5道面试题-Day35

1.React 中 refs 的作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，
该值会作为回调函数的第一个参数返回：

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

上述代码中的 input 域包含了一个 ref 属性，
该属性声明的回调函数会接收 input 对应的 DOM 元素，
我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是，refs 并不是类组件的专属，
函数式组件同样能够利用闭包暂存其值：

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

 

2.展示组件(Presentational component)和容器组件(Container component)之间有何不同?

展示组件关心组件看起来是什么。
展示专门通过 props 接受数据和回调，
并且几乎不会有自身的状态，
但当展示组件拥有自身的状态时，
通常也只关心 UI 状态而不是数据的状态。
容器组件则更关心组件是如何运作的。
容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，
它们会调用 Flux actions，
并将其作为回调提供给展示组件。
容器组件经常是有状态的，
因为它们是(其它组件的)数据源。

 

3.类组件(Class component)和函数式组件(Functional component)之间有何不同?

类组件不仅允许你使用更多额外的功能，
如组件自身的状态和生命周期钩子，
也能使组件直接访问 store 并维持状态
当组件仅是接收 props，
并将组件自身渲染到页面时，
该组件就是一个 '无状态组件(stateless component)'，
可以使用一个纯函数来创建这样的组件。
这种组件也被称为哑组件(dumb components)或展示组件

 

4.(组件的)状态(state)和属性(props)之间有何不同?

State 是一种数据结构，
用于组件挂载时所需数据的默认值。
State 可能会随着时间的推移而发生突变，
但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。
props 由父组件传递给子组件，
并且就子组件而言，
props 是不可变的(immutable)。
组件不能改变自身的 props，
但是可以把其子组件的 props 放在一起(统一管理)。
Props 也不仅仅是数据--回调函数也可以通过 props 传递。

 

5.何为受控组件(controlled component)?

在 HTML 中，类似 <input>, 
<textarea> 和 <select> 这样的表单元素会维护自身的状态，
并基于用户的输入来更新。
当用户提交表单时，
前面提到的元素的值将随表单一起被发送。
但在 React 中会有些不同，
包含表单元素的组件将会在 state 中追踪输入的值，
并且每次调用回调函数时，
如 onChange 会更新 state，重新渲染组件。
一个输入表单元素，
它的值通过 React 的这种方式来控制，
这样的元素就被称为"受控元素"。