React 学习笔记

时间:2021-08-17
本文章向大家介绍React 学习笔记,主要包括React 学习笔记使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

React入门

React由Facebook开发,它是一个用于构建用户界面/视图的JavaScript库

  • 起初由Facebook的软件工程师Jordan Walke创建
  • 于2011年部署于Facebook的newsfeed
  • 随后在2012年部署于Instagram
  • 2013年5月宣布开源。

为什么要学React?

  • 原生JavaScript操作DOM繁琐、效率低 (DOM-API操作UI)

    document.getElementById('...');
    
  • 使用JavaScript直接操作DOM,浏览器会进行大量的回流重绘

  • 原生JavaScript没有组件化/模块化的编码方案,代码复用率低。

React的特点

  • 采用组件化/模块化模式声明式编码,提高开发效率及组件复用率。
  • 在React Native中可以是用React与法进行移动端开发
  • 使用虚拟DOM和优秀的Diffing算法,尽量减少与真实DOM的交互。

引包

react.development.js ===>> React核心库
react-dom.development.js ===>> React扩展库,用于支持react操作dom
prop-types.js ===>> 类型检查库
babel.min.js ===>> 语法转换核心库,jsx 转 js 
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react扩展库,用于react支持操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将es6转es5和jsx转js -->
<script src="../js/babel.min.js"></script>

注意编写代码的script标签一定要指定类型

  • type="text/babel" 告诉浏览器使用babel来翻译
<script type="text/babel"></script>

Hello React

先准备好一个容器,React会将虚拟dom渲染到这个容器中

<div id="app"></div>

创建一个虚拟dom,注意此处<h1>...</h1>不需要使用引号引起来。

// 创建虚拟dom
const vdom = <h1>Hello React!</h1>;

将虚拟dom渲染到容器上

// 渲染虚拟dom
ReactDOM.render(vdom, app);

启动走你~~

创建虚拟DOM的第二种方式

在React中,除了使用jsx创建虚拟DOM外,还可以以使用js来进行创建。这需要使用到React核心库提供的React.createElementAPI进行创建。它有三个参数:

  • 第一个参数:标签名
  • 第二个参数:标签属性
  • 第N个参数:标签内容
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react扩展库,用于react支持操作dom -->
<script src="../js/react-dom.development.js"></script>
<div id="app"></div>

<script>
  const attr = {id: 'hello'}
  // 创建虚拟dom
  const vdom = React.createElement('h1',attr , 'Hello React!');
  // 渲染虚拟dom
  ReactDOM.render(vdom, app);
</script>

虚拟DOM与真实DOM

  • 虚拟DOM它本质是一个Object类型的对象(一般对象)
  • 虚拟DOM比较“轻”,而真实DOM比较“重”,因为虚拟DOM是React内部在用,用不上真实DOM上那么多的属性。
  • 虚拟DOM最终会被React转化为真实DOM呈现在页面上。

JSX

  • 全称叫JavaScript XMl

  • JSX是React定义的一种类似于XML的js拓展语法:JS + XML

  • 本质是React.createElement(component, props, ...children)方法的语法糖。

  • JSX用于简化创建虚拟DOM

    • 写法

      const ele = <h1>Hello JSX!</h1>;
      
    • 他不是字符串,也不是HTML/XML标签

    • 它最终产生的就是一个JS对象

  • 标签名可以是HTML标签,也可以是其他标签。

JSX语法规则

  1. 定义虚拟DOM的时候不要写引号

    const vdom = (
        <h1 id="clover">
            <span>Hello React!</span>
        </h1>
    );
    
  2. 标签中要混入JS表达式时需要使用{}

    const author = "clover";
    const body = "hello world!";
    // 创建虚拟dom
    const vdom = (
      <h1 id={author}>
        <span>{body}</span>
      </h1>
    );
    
  3. 样式的类名指定不要使用class,需要使用className

    <style>
      .myStyle {
        background-color: bisque;
        font-size: 20px;
      }
    </style>
    const vdom = (
      <h1 className="myStyle" id="clover">
        <span>hello world!</span>
      </h1>
    );
    
  4. jsx中,若想使用内联样式,不能使用html中的语法style="color: #900",需要传递一个json到style属性中。

    const vdom = (
      <h1 id="clover">
        <span style={{color: '#900', fontSize: '20px'}}>Hello React!</span>
      </h1>
    );
    
  5. 虚拟DOM必须只有一个根标签,不允许出现多个根标签,例如:

    const vdom = (
      <h1 id="clover">..</h1>
      <h1 id="clover">..</h1>
    );
    
  6. 必须有闭合标签或自闭和

  7. 标签命名

    • 若是小写字母开头,则将该标签转为html中同名元素,若html中无该标签,则抛出异常。
    • 若大写字母开头,React就去渲染对应的组件,若找不到该组件,则抛出错误。

模块与组件

模块

  • 对外提供特定功能的js程序,一般就是一个js文件
  • 随着业务逻辑的增加,代码越来越多且复杂,为了提高代码质量、复用性、运行效率和阅读性,所以将不同功能点抽取成一个个模块。
  • 当应用的js都是以模块的方式来编写时,那么这个应用就可以被定义为一个模块化的应用。

组件

  • 组件是用来实现局部功能效果的代码和资源的集合
  • 随着界面功能越来越复杂,组件化的方式能够提高代码质量、复用性和阅读性。
  • 当应用是以多组件的方式实现,那么这个应用就会被定义为一个组件化的应用。

React面向组件编程

函数式组件

定义函数式组件,注意首字母一定要大写,并且函数必须有返回值

function FnComponent() {
  return <div>我是函数式组件</div>;
}

将这个组件渲染到页面上

ReactDOM.render(<FnComponent/>, app);

在这里时注意,FnComponent组件中的this是一个undefined,因为在经过babel翻译之后开启了严格模式。

在React执行了ReactDOM.render(<FnComponent/>, app);之后发生了两件事:

  1. React解析组件标签,找到FnComponent组件
  2. 发现组件时使用函数定义的,随后调用该函数将返回的虚拟DOM转为真实DOM呈现在页面中。

类式组件

创建一个类,首字母要大写并且继承React.Component,在这个类中,必须有一个render方法,并且这个方法必须返回一个虚拟DOM。

class ClassComponent extends React.Component{
  render() {
    return <div>你好</div>;
  }
}

ReactDOM.render(<ClassComponent/>, app);

原文地址:https://www.cnblogs.com/CloverYou/p/15154450.html