React 面试必知必会 Day11

1. setState() 和 replaceState() 方法之间的区别是什么？

当你使用 setState() 时，当前和之前的状态被合并。 replaceState() 抛出当前的状态，只用你提供的内容来替换它。通常 setState() 会被使用，除非你真的因为某些原因需要删除所有之前的键。你也可以在 setState() 中把状态设置为 false/null，而不是使用 replaceState()。

2. 如何监听状态变化？

当状态发生变化时，componentDidUpdate 生命周期方法将被调用。你可以将提供的状态和 props 值与当前的状态和 props 进行比较，以确定是否有意义的变化。

componentDidUpdate(object prevProps, object prevState)

注意： 以前的 ReactJS 版本也使用 componentWillUpdate(object nextProps, object nextState) 监听状态改变。在最新的版本中，它已被弃用。

3. 在 React 状态下，删除数组元素的推荐方法是什么？

更好的方法是使用 Array.prototype.filter() 方法。

例如，让我们创建一个 removeItem() 方法来更新状态。

removeItem(index) {
  this.setState({
    data: this.state.data.filter((item, i) => i !== index)
  })
}

4. 有没有可能在不渲染 HTML 的情况下使用 React 呢？

在最新版本（>=16.2）中可以实现。以下是可用选项。

render() {
  return false
}

render() {
  return null
}

render() {
  return []
}

render() {
  return <React.Fragment></React.Fragment>
}

render() {
  return <></>
}

返回 undefined 是不行的。

5. 如何用 React 打印漂亮的 JSON？

我们可以使用 <pre> 标签，这样可以保留 JSON.stringify() 的格式。

const data = { name: 'John', age: 42 };

class User extends React.Component {
  render() {
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
  }
}

React.render(<User />, document.getElementById('container'));

6. 为什么你不能在 React 中更新 props？

React 的理念是，props 应该是不可变的和自上而下的。这意味着父组件可以向子组件发送任何 props 值，但子组件不能修改收到的 props。

7. 如何在页面加载时聚焦一个输入框？

你可以通过为 input 元素创建 ref 并在 componentDidMount() 中使用它。

class App extends React.Component {
  componentDidMount() {
    if (this.nameInput) {
      this.nameInput.focus();
    }
  }

  render() {
    return (
      <div>
        <input defaultValue={"Won't focus"} />
        <input
          ref={input => (this.nameInput = input)}
          defaultValue={'Will focus'}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

8. 更新状态中的对象的方式有哪些？

1. 合并状态和对象后调用 setState()：

• 使用 Object.assign() 创建对象的拷贝：

const user = Object.assign({}, this.state.user, { age: 42 });
this.setState({ user });

• 使用展开操作符：

const user = { ...this.state.user, age: 42 };
this.setState({ user });

2. 调用 setState() 时传入函数：

this.setState(prevState => ({
  user: {
    ...prevState.user,
    age: 42,
  },
}));

9. 我们如何在浏览器中查看运行时的 React 的版本？

你可以使用 React.version 来获取版本。

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>{`React version: ${REACT_VERSION}`}</div>,
  document.getElementById('app'),
);

10. 在 create-react-app 中包含 polyfills 的方法是什么？

有一些方法可以在 create-react-app 中包含 polyfills。

1. 手动从 core-js 引入：

创建一个名为（类似）polyfills.js 的文件并将其导入根 index.js 文件。运行 npm install core-js 或 yarn add core-js 并导入你所需要的特定功能。

import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';

2. 使用 Polyfill 服务：

使用 polyfill.io CDN，通过在 index.html 中添加这一行来检索自定义的、针对浏览器的 polyfills。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

在上面的脚本中，我们必须明确请求 Array.prototype.includes 功能，因为它不包括在默认功能集中。