撩课-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 的这种方式来控制，
这样的元素就被称为"受控元素"。

复制代码