React每日5道题7/13

220 阅读1分钟

为什么浏览器无法读取JSX?

浏览器只能处理javascript对象,像js对象中的jsx,只能借助babel这样的jsx转译器转化成javascript之后传给浏览器进行解析。

与 ES5 相比,React 的 ES6 语法有何不同?

  • 模块方式:
    • 导入es5使用commonjs的require语法,es6使用import语法,
    • 导出es5使用module.exports进行导出,es6中使用export default
  • 创建类组件的方式
  • es5使用createClass
  • es6使用class进行创建类组件
  • 初始化state的方式:
    • es5使用在createClass中定义getInitialState属性进行初始化state
    • es6通过在constructor中直接给state赋值进行初始化state

React与Angular有何不同

  • Angular完全是一个mvc框架,而React仅仅是一个javascript库用于构建视图。
  • 数据绑定:Angular使用双向数据绑定,而React使用单向数据绑定。
  • 母体技术:Angular使用Typescript语言,而React使用JavaScript语言。
  • DOM,Angular使用常规dom,而React使用虚拟dom,这使得angular要比react慢
  • Angular状态管理不需用到redux,而react中数据复杂的情况下会用到redux来进行状态的管理

**React组件生命周期的阶段是什么? 详细解释 React 组件的生命周期方法。

react组件生命周期分为三个阶段:

  • 初始渲染阶段
  • 更新阶段
  • 卸载阶段 react生命周期方法:
  • 渲染阶段:
    • componentWillMount
    • render
  • 更新阶段
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • ComponentDidUpdate
  • 卸载阶段
    • componentWillUmount

列出一些应该使用 Refs 的情况

  • 与第三方 DOM 库集成
  • 触发命令式动画
  • 管理焦点,文本选择或媒体播放