大家好,我是洛竹🎋,一只住在杭城的木系前端🧚🏻♀️,如果你喜欢我的文章📚,可以通过点赞帮我聚集灵力⭐️。
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
的值。
你可以简单地使用 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
表达式是第一阶段的建议。
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}`} />
如果你想把一个对象数组传递给一个具有特定 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,
};
你不应该在引号内使用大括号,因为它将被计算为一个字符串。
<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'}`}>
react
包包含 React.createElement()
、React.Component
、React.Children
, 以及其他与元素和组件类相关的帮助函数。你可以把这些看作是你构建组件所需要的同构或通用助手。react-dom
包包含 ReactDOM.render()
,在 react-dom/server
中,我们有 ReactDOMServer.renderToString()
和 ReactDOMServer.renderToStaticMarkup()
的服务器端渲染支持。
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 之间共享的组件铺平了道路。
如果你试图用标准的 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'} />
你可以在常规 React 中使用展开语法。
<button style={{ ...styles.panel.button, ...styles.panel.submitButton }}>
{'Submit'}
</button>
如果你使用的是 React Native,那么你可以使用数组符号。
<button style={[styles.panel.button, styles.panel.submitButton]}>
{'Submit'}
</button>
你可以在 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。