React面试题

1.什么是React？

React是一个开源的前端JavaScript库，用于构建用户界面，尤其是单页面的应用。它用与处理网页和移动应用程序的试图层.React是由Facebook的软件工程师jordan walke创建，在2011年React应用首次被部署到Facebook的信息流中，之后与2012年被应用到instagram上

2.React的主要特点是什么？

React的主要特性有：

• 考虑到真实的DOM操作成本很高，它使用VirtualDOM不是真实的DOM.
• 支持服务段渲染
• 遵循单项数据流或者数据绑定
• 使用可重复/可组合的UI组件开发视图

  3.什么是JSX?

  JSX是ECMAScript一个类似ML的语法扩展。基本上，他只是为了React.createElement()函数提供语法糖，从而让在我们在JavaSctipy中，使用类HTML模板的语法，进行页面描述。
  在下面的示例中，

  内的文本标签会作为JavaSctipt函数返回给渲染函数。

  class App extends React.Component{
      return(){
          <div>
              <h1>{'Welcome to React world!'}</h1>
          </div>
      }
  }

  以上示例render方法中的jsx将会被转换为一下内容：

  React.createElement("div", null, React.createElement("h1",null,"Welcome to React world!'));

  4.元素和组件有什么区别？

  一个Element是一个简单的对象，它描述了你希望在屏幕上以DOM节点或其他组件的形式呈现的内容。Elements在他们的属性中可以包含其他的Elements。创建一个React元素是很轻量的，一旦元素被创建后，它将不会被修改。
  React Element的对象表示如下:

  const element = React.createElement(
      'div',
      {id: 'login-btn'},
      'Login'
  )

  上面的 React.createElement() 函数会返回一个对象。

  <div id="login-btn'>Login</div>

  而一个组件可以用多种不同方式声明。它可以是一个含有render()方法的类，或者，在简单的情况中，它可以定义为函数。无论哪种情况，它都将props作为输入，并返回一个JSX树作为输出。

  const Button = ({ onLogin }) =>
      <div id={'login-btn'} onClick={onLogin} />

  然后JSX被转换成React.createElement()函数：

  const Button = ({ onLogin }) => React.createElement(
      'div',
      {id: 'login-btn', onClick: onLogin },
      'Login'
  )

  5.如何在React中创建组件？

  有两种可行的方法来创建一个组件：
  i.Function Components:这是创建组件的最简单的方法，这些是纯JavaScript函数，接受props对象作为第一个参数并返回React元素：

  function Greetion({ message }){
      return <h1>{'Hello, ${message}'}</h1>
  }

  ii.Class Components:你还可以使用ES6类来定义组件，上面的函数组件若使用ES6的类可改写为：

  class Greetion extends React.Component{
      render(){
          return <h1>{'Hello, ${this.props.message}'}</h1>
      }
  }

  6.如何使用类组件和函数组件？

  如果组件需要使用状态或生命周期方法，那么使用类组件，否则使用函数组件。

  7.什么是Pure Components?

  React.PureComponent完全相同，只是它为你处理了shouldComponetUpdate()方法。当属性或者状态发生变化时，PureComponent将对属性和状态进行浅比较。另一方面，普通组件不会将当前的属性和状态与新的属性和状态进行比较，因此，在默认情况下，每当调用shouldComponetUpdate时，组件将重新渲染。