这是我参与更文挑战的第17天，活动详情查看：更文挑战
大家好，我是洛竹🎋，一只住在杭城的木系前端🧚🏻♀️，如果你喜欢我的文章📚，可以通过点赞帮我聚集灵力⭐️。
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. 更新状态中的对象的方式有哪些？
- 合并状态和对象后调用
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 });
- 调用
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。
- 手动从
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';
- 使用 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 功能，因为它不包括在默认功能集中。
本文首发于「掘金专栏」，同步于公众号「洛竹早茶馆」和「洛竹的官方网站」，翻译自 reactjs-interview-questions。
