最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 《React 面试必知必会》Day5

    正文概述 掘金(洛竹)   2021-06-12   398

    1. 协调(reconciliation)是什么?

    当一个组件的 props 或 state 发生变化时,React 通过比较新返回的元素和之前渲染的元素来决定是否有必要进行实际的 DOM 更新。当它们不相等时,React 将更新 DOM。这个过程被称为 协调(reconciliation)

    2. 如何用一个动态键名来设置状态?

    如果你使用 ES6 或 Babel 转码器来转换你的 JSX 代码,那么你可以用计算属性命名完成。

    handleInputChange(event) {
      this.setState({ [event.target.id]: event.target.value })
    }
    

    3. 每次组件渲染时,函数被调用的常见错误是什么?

    你需要确保在传递函数作为参数时,没有调用该函数。

    render() {
      // 错误❌: handleClick 被调用而不是作为引用被传入
      return <button onClick={this.handleClick()}>{'Click Me'}</button>
    }
    

    取而代之的是传递函数本身,不加圆括号。

    render() {
      // 正确:handleClick 是作为一个引用传递的!
      return <button onClick={this.handleClick}>{'Click Me'}</button>
    }
    

    4. lazy 函数是否支持命名导出?

    不,目前 React.lazy 函数只支持默认出口。如果你想导入被命名导出的模块,你可以创建一个中间模块,将其作为默认出口。这也保证了摇树的工作,不会拉取未使用的组件。

    让我们来看看一个导出多个命名组件的组件文件。

    // MoreComponents.js
    export const SomeComponent = /* ... */;
    export const UnusedComponent = /* ... */;
    

    并在一个中间文件 IntermediateComponent.js 中重新导出 MoreComponents.js 组件

    // IntermediateComponent.js
    export { SomeComponent as default } from './MoreComponents.js';
    

    现在你可以使用下面的 lazy 函数导入该模块。

    import React, { lazy } from 'react';
    const SomeComponent = lazy(() => import('./IntermediateComponent.js'));
    

    5. 为什么 React 使用 className 而不是 class 属性?

    class 是 JavaScript 的一个关键字,而 JSX 是 JavaScript 的一个扩展。这就是为什么 React 使用 className 而不是 class 的主要原因。传递一个字符串作为 className prop。

    render() {
      return <span className={'menu navigation-menu'}>{'Menu'}</span>
    }
    

    6. 片段(fragments)是什么?

    这是 React 中常见的模式,用于一个组件返回多个元素。片段让你可以对一个 children 的列表进行分组,而无需在 DOM 中添加额外的节点。

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

    这里还有一个短语法可以用,但是很多工具不支持:

    render() {
      return (
        <>
          <ChildA />
          <ChildB />
          <ChildC />
        </>
      )
    }
    

    7. 为什么片段(fragments)比 div 容器要好?

    1. 片段的速度更快一些,并且由于没有创建额外的 DOM 节点而使用更少的内存。这只有在非常大和深的树上才会体现出真正的好处。
    2. 一些 CSS 机制,如 Flexbox 和 CSS Grid 有一个特殊的父子关系,在中间添加 div 会使其难以保持所需的布局。
    3. DOM 检查器不那么杂乱。

    8. 什么是 React 中的传递门(Portal)?

    传递门是一种推荐的方式,可以将子节点渲染到父组件的 DOM 层次结构之外的 DOM 节点中。

    ReactDOM.createPortal(child, container);
    

    第一个参数是任何可渲染的 React children,比如一个元素、字符串或片段。第二个参数是一个 DOM 元素。

    9. 什么是无状态组件?

    如果行为是独立于其状态的,那么它可以是一个无状态组件。你可以使用函数或类来创建无状态组件。但除非你需要在你的组件中使用生命周期钩子,否则你应该选择函数组件。如果你决定在这里使用函数组件,会有很多好处;它们易于编写、理解和测试,速度稍快,而且你可以完全避免使用 this 关键字。

    10. 什么是状态组件?

    如果一个组件的行为依赖于该组件的状态(state),那么它可以被称为有状态的组件。这些有状态的组件总是类组件,并且有一个在构造器(constructor)中被初始化的状态。

    class App extends Component {
      // 也可以使用类字段语法
      constructor(props) {
        super(props);
        this.state = { count: 0 };
      }
    
      render() {
        // ...
      }
    }
    

    React 16.8 更新:

    Hooks 让你在不写类的情况下使用状态和其他 React 功能。

    等效的函数组件

    import React, {useState} from 'react';
    
    const App = (props) => {
      const [count, setCount] = useState(0);
    
      return (
        // JSX
      )
    }
    

    起源地下载网 » 《React 面试必知必会》Day5

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元