您的位置 首页 技术

React入门知识点整理

做前端的一定都知道现在是三大框架——Vue、React、Angular三足鼎立的时代。Vue是公认的最容易入门的,因为它文件结构上有传统的HTML的影子,让刚接触它的前端人员刚到很…

做前端的一定都知道现在是三大框架——Vue、React、Angular三足鼎立的时代。Vue是公认的最容易入门的,因为它文件结构上有传统的HTML的影子,让刚接触它的前端人员刚到很“亲切”。Angular虽然也有保留HTML,但它却是最难入门的,究其原因可能和他是由Google的后端程序员开发的,又是用的纯Typescript,异步使用Rxjs,对于前端新人来说门槛太高。React入门难度适中,网上各种言论说React上手比Vue难,可能难就难在不能深刻理解JSX,或者对ES6的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说React比较难上手。今天就来整理一些React入门需要掌握哪些知识点。

为什么要引入 React

在写 React 的时候,你可能会写类似这样的代码:

import React from 'react'function A() {  // ...other code  return <h1>前端桃园</h1>}

你肯定疑惑过,上面的代码都没有用到 React,为什么要引入 React 呢?

如果你把 import React from ‘react’ 删掉,还会报下面这样的错误:

1.jpg

那么究竟是哪里用到了这个 React,导致我们引入 React 会报错呢,不懂这个原因,那么就是 JSX 没有搞得太明白。

你可以讲上面的代码(忽略导入语句)放到 在线 babel 里进行转化一下,发现 babel 会把上面的代码转化成:

function A() {  // ...other code  return React.createElement("h1", null, "前端桃园");}

因为从本质上讲,JSX 只是为React.createElement(component, props, …children)函数提供的语法糖。

为什么要用 className 而不用 class

1.React 一开始的理念是想与浏览器的 DOM API 保持一致而不是 HTML,因为 JSX 是 JS 的扩展,而不是用来代替 HTML 的,这样会和元素的创建更为接近。在元素上设置class需要使用className这个 API:

const element = document.createElement("p")element.className = "hello"

2.浏览器问题,ES5 之前,在对象中不能使用保留字。以下代码在 IE8 中将会抛出错误:

const element = {  attributes: {    class: "hello"  }}

3.解构问题,当你在解构属性的时候,如果分配一个class变量会出问题:

const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }const { className } = { className: 'foo' } const { class: className } = { class: 'foo' }

为什么属性要用小驼峰

因为 JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。

为什么 constructor 里要调用 super 和传递 props

class Clock extends React.Component {  constructor(props) {    super(props);    this.state = {date: new Date()};  }  render() {    return (      <p>        <h1>Hello, world!</h1>        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </p>    );  }}

而且有这么一段话,不仅让我们调用 super 还要把 props 传递进去,但是没有告诉我们为什么要这么做。

为什么要调用 super?

其实这不是 React 的限制,这是 JavaScript 的限制,在构造函数里如果要调用 this,那么提前就要调用 super。在 React 里,我们常常会在构造函数里初始化 state,this.state = xxx ,所以需要调用 super。

为什么要传递 props?

你可能以为必须给 super 传入 props,否则 React.Component 就没法初始化 this.props:

class Component {  constructor(props) {    this.props = props;    // ...  }}

不过,如果你不小心漏传了 props,直接调用了 super(),你仍然可以在 render 和其他方法中访问 this.props(不信的话可以试试嘛)。

为啥这样也行?因为 React 会在构造函数被调用之后,会把 props 赋值给刚刚创建的实例对象:

const instance = new YourComponent(props);instance.props = props;

但这意味着你在使用 React 时,可以用 super() 代替 super(props) 了么?

那还是不行的,不然官网也不会建议你调用 props 了,虽然 React 会在构造函数运行之后,为 this.props 赋值,但在 super() 调用之后与构造函数结束之前, this.props 仍然是没法用的。

// Inside Reactclass Component {  constructor(props) {    this.props = props;    // ...  }}// Inside your codeclass Button extends React.Component {  constructor(props) {    super(); //

以上就是React入门知识点整理的详细内容,更多请关注24课堂在线网其它相关文章!


	
本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/10616.html

为您推荐

返回顶部