React 面试必知必会 Day10
大家好，我是洛竹🎋，一只住在杭城的木系前端🧚🏻♀️，如果你喜欢我的文章📚，可以通过点赞帮我聚集灵力⭐️。
1. 在 React 中使用 ES6 类的，super() 和 super(props) 之间有什么区别？
当你想在 constructor() 中访问 this.props 时，你应该把 props 传给 super() 方法。
「使用 super(props)：」
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // { name: 'John', ... }
}
}
「使用 super()：」
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
}
}
在 constructor() 之外，两者都会显示相同的 this.props 的值。
2. 如何在 JSX 内循环？
你可以简单地使用 Array.prototype.map 与 ES6 箭头函数语法。
例如，对象的 items 数组被映射成组件的数组。
<tbody>
{items.map(item => (
<SomeComponent key={item.id} name={item.name} />
))}
</tbody>
但你不能用 for 循环来迭代。
<tbody>
for (let i = 0; i < items.length; i++) {
<SomeComponent key={items[i].id} name={items[i].name} />
}
</tbody>
这是因为 JSX 标签被转换为函数调用，而且你不能在表达式中使用语句。这可能会改变，因为 do 表达式是第一阶段的建议。
3. 你如何在属性引号中访问 props？
React（或 JSX）不支持属性值内的变量插值。下面的表示方法就不能用了。
<img className="image" src="images/{this.props.image}" />
但你可以把任何 JS 表达式放在大括号内作为整个属性值。所以下面的表达式是有效的。
<img className="image" src={'images/' + this.props.image} />
使用模板字符串也可以。
<img className="image" src={`images/${this.props.image}`} />
4. 什么是带 shape 的 React 原型数组？
如果你想把一个对象数组传递给一个具有特定 shape 的组件，那么使用 React.PropTypes.shape() 作为 React.PropTypes.arrayOf() 的一个参数。
ReactComponent.propTypes = {
arrayWithShape: React.PropTypes.arrayOf(
React.PropTypes.shape({
color: React.PropTypes.string.isRequired,
fontSize: React.PropTypes.number.isRequired,
}),
).isRequired,
};
5. 如何有条件地应用类属性？
你不应该在引号内使用大括号，因为它将被计算为一个字符串。
<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">
相反，你需要把大括号移到外面（别忘了在类名之间包括空格）。
<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>
模板字符串也可以使用。
<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>
6. React 和 ReactDOM 之间有什么区别？
react 包包含 React.createElement()、React.Component、React.Children, 以及其他与元素和组件类相关的帮助函数。你可以把这些看作是你构建组件所需要的同构或通用助手。react-dom 包包含 ReactDOM.render()，在 react-dom/server 中，我们有 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup() 的服务器端渲染支持。
7. 为什么 ReactDOM 要从 React 中分离出来？
React 团队致力于将所有与 DOM 相关的功能提取到一个单独的库中，称为 ReactDOM。React v0.14 是第一个分割库的版本。通过查看一些包，react-native、react-art、react-canvas和 react-three，已经很清楚，React 的优秀和本质与浏览器或 DOM 无关。
为了建立更多 React 可以渲染的环境，React 团队计划将主 React 包分成两个：react 和 react-dom。这就为编写可以在网络版 React 和 React Native 之间共享的组件铺平了道路。
8. 如何使用 React label 元素？
如果你试图用标准的 for 属性渲染一个绑定在文本输入上的 <label> 元素，那么它产生的 HTML 会缺少该属性，并在控制台打印出警告。
<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />
由于 for 在 JavaScript 中是一个保留关键字，我们可以使用 htmlFor 代替。
<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />
9. 如何组合多个内联样式对象？
你可以在常规 React 中使用展开语法。
<button style={{ ...styles.panel.button, ...styles.panel.submitButton }}>
{'Submit'}
</button>
如果你使用的是 React Native，那么你可以使用数组符号。
<button style={[styles.panel.button, styles.panel.submitButton]}>
{'Submit'}
</button>
10. 如何在浏览器调整大小时重新渲染视图？
你可以在 componentDidMount() 中监听 resize 事件，然后更新尺寸（width 和 height）。你应该在 componentWillUnmount() 方法中移除监听器。
class WindowDimensions extends React.Component {
componentWillMount() {
this.updateDimensions();
}
componentDidMount() {
window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimensions);
}
updateDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
}
render() {
return (
<span>
{this.state.width} x {this.state.height}
</span>
);
}
}
本文首发于「掘金专栏」，同步于公众号「洛竹早茶馆」和「洛竹的官方网站」，翻译自 reactjs-interview-questions。
腾讯云开发者
