前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React 面试必知必会 Day10

React 面试必知必会 Day10

作者头像
用户1250838
发布2021-08-26 15:25:21
3.9K0
发布2021-08-26 15:25:21
举报
文章被收录于专栏:洛竹早茶馆

大家好,我是洛竹🎋,一只住在杭城的木系前端🧚🏻‍♀️,如果你喜欢我的文章📚,可以通过点赞帮我聚集灵力⭐️。

1. 在 React 中使用 ES6 类的,super()super(props) 之间有什么区别?

当你想在 constructor() 中访问 this.props 时,你应该把 props 传给 super() 方法。

「使用 super(props):」

代码语言:javascript
复制
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // { name: 'John', ... }
  }
}

「使用 super():」

代码语言:javascript
复制
class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
  }
}

constructor() 之外,两者都会显示相同的 this.props 的值。

2. 如何在 JSX 内循环?

你可以简单地使用 Array.prototype.map 与 ES6 箭头函数语法。

例如,对象的 items 数组被映射成组件的数组。

代码语言:javascript
复制
<tbody>
  {items.map(item => (
    <SomeComponent key={item.id} name={item.name} />
  ))}
</tbody>

但你不能用 for 循环来迭代。

代码语言:javascript
复制
<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)不支持属性值内的变量插值。下面的表示方法就不能用了。

代码语言:javascript
复制
<img className="image" src="images/{this.props.image}" />

但你可以把任何 JS 表达式放在大括号内作为整个属性值。所以下面的表达式是有效的。

代码语言:javascript
复制
<img className="image" src={'images/' + this.props.image} />

使用模板字符串也可以。

代码语言:javascript
复制
<img className="image" src={`images/${this.props.image}`} />

4. 什么是带 shape 的 React 原型数组?

如果你想把一个对象数组传递给一个具有特定 shape 的组件,那么使用 React.PropTypes.shape() 作为 React.PropTypes.arrayOf() 的一个参数。

代码语言:javascript
复制
ReactComponent.propTypes = {
  arrayWithShape: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      color: React.PropTypes.string.isRequired,
      fontSize: React.PropTypes.number.isRequired,
    }),
  ).isRequired,
};

5. 如何有条件地应用类属性?

你不应该在引号内使用大括号,因为它将被计算为一个字符串。

代码语言:javascript
复制
<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">

相反,你需要把大括号移到外面(别忘了在类名之间包括空格)。

代码语言:javascript
复制
<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>

模板字符串也可以使用。

代码语言:javascript
复制
<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>

6. React 和 ReactDOM 之间有什么区别?

react 包包含 React.createElement()React.ComponentReact.Children, 以及其他与元素和组件类相关的帮助函数。你可以把这些看作是你构建组件所需要的同构或通用助手。react-dom 包包含 ReactDOM.render(),在 react-dom/server 中,我们有 ReactDOMServer.renderToString()ReactDOMServer.renderToStaticMarkup() 的服务器端渲染支持。

7. 为什么 ReactDOM 要从 React 中分离出来?

React 团队致力于将所有与 DOM 相关的功能提取到一个单独的库中,称为 ReactDOM。React v0.14 是第一个分割库的版本。通过查看一些包,react-nativereact-artreact-canvasreact-three,已经很清楚,React 的优秀和本质与浏览器或 DOM 无关。

为了建立更多 React 可以渲染的环境,React 团队计划将主 React 包分成两个:reactreact-dom。这就为编写可以在网络版 React 和 React Native 之间共享的组件铺平了道路。

8. 如何使用 React label 元素?

如果你试图用标准的 for 属性渲染一个绑定在文本输入上的 <label> 元素,那么它产生的 HTML 会缺少该属性,并在控制台打印出警告。

代码语言:javascript
复制
<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

由于 for 在 JavaScript 中是一个保留关键字,我们可以使用 htmlFor 代替。

代码语言:javascript
复制
<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

9. 如何组合多个内联样式对象?

你可以在常规 React 中使用展开语法。

代码语言:javascript
复制
<button style={{ ...styles.panel.button, ...styles.panel.submitButton }}>
  {'Submit'}
</button>

如果你使用的是 React Native,那么你可以使用数组符号。

代码语言:javascript
复制
<button style={[styles.panel.button, styles.panel.submitButton]}>
  {'Submit'}
</button>

10. 如何在浏览器调整大小时重新渲染视图?

你可以在 componentDidMount() 中监听 resize 事件,然后更新尺寸(widthheight)。你应该在 componentWillUnmount() 方法中移除监听器。

代码语言:javascript
复制
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。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 洛竹早茶馆 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 在 React 中使用 ES6 类的,super() 和 super(props) 之间有什么区别?
  • 2. 如何在 JSX 内循环?
  • 3. 你如何在属性引号中访问 props?
  • 4. 什么是带 shape 的 React 原型数组?
  • 5. 如何有条件地应用类属性?
  • 6. React 和 ReactDOM 之间有什么区别?
  • 7. 为什么 ReactDOM 要从 React 中分离出来?
  • 8. 如何使用 React label 元素?
  • 9. 如何组合多个内联样式对象?
  • 10. 如何在浏览器调整大小时重新渲染视图?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档