React学习笔记

gqe_it

已于 2023-02-17 18:10:39 修改

阅读量512

点赞数

分类专栏：前端文章标签： react.js 学习 javascript

于 2022-10-17 21:56:03 首次发布

本文链接：https://blog.csdn.net/gqe123456/article/details/127377595

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

文章目录

一、React入门
二、React面向组件编程
三、React应用(基于React脚手架)
- 3.1 使用create-react-app创建react应用
四、React ajax
五、React路由

一、React入门

1.1、了解

1.1.1、官网

英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/

1.1.2、React是什么

用于构建用户界面的javaScript库
是一个将数据渲染为HTML视图的开源JavaScript库

1.1.3、为什么要学

1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI )
2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3.原生JavaScript没有组件化编码方案，代码复用率低。

1.1.4、学习React之前你要掌握的JavaScript基础知识

判断this的指向
class(类)
ES6语法规范
npm包管理器
原型、原型链
数组常用方法
模块化

1.1.5、React的特点

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

1.1.6、React高效的原因

（1）使用虚拟(virtual)DOM不总是直接操作页面真实DOM。
（2）DOM Diffing 算法,最小化页面重绘。

1.2、React的基本使用

1.2.1 相关js库

1.react.js：React核心库。
2.react-dom.js：提供操作DOM的react扩展库。
3.babel.min.js：解析JSX语法代码转为JS代码的库。

1.2.2 创建虚拟DOM的两种方式

1.纯JS方式(一般不用)

<!-- 创建好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>

    <script type="text/javascript">
      // 1、创建虚拟dom
      const VDOM = React.createElement("h1", { id: "title" }, "Hello,React");
      // 2、渲染虚拟dom到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>

2.JSX方式

<!-- 创建好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建虚拟dom
      const VDOM = <h1>hello,react</h1>; //此处一定不加引号，不是字符串
      // 2、渲染虚拟dom到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>

1.2.3 虚拟DOM与真实DOM

1.React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面创建的就是一个简单的虚拟DOM对象
2.虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

1.3 React JSX

1.3.1 JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
作用: 用来简化创建虚拟DOM
1)写法：var ele = <h1>Hello JSX!</h1>
2)注意1：它不是字符串, 也不是HTML/XML标签
3)注意2：它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
1)标签首字母
a、若小写字母开头。则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
b.若大写字母开头，react就去渲染对应的组件，若没有定义则报错。
2)遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含；
3)定义虚拟DOM时，不要写引号；
4)样式的类名指定不要用class，要用className；
5)内联样式，要用style={{key:value}}的形式写；
6)虚拟DOM必须只有一个根标签；
7)标签必须闭合；
babel.js的作用
1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2)只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

1.3.2 渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
1)参数一: 纯js或jsx创建的虚拟dom对象
2)参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

1.3.3 JSX练习

需求: 动态展示如下列表
在这里插入图片描述

<!-- 创建好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      // 模拟一些数据
      const data = ["Angular", "React", "Vue"];
      // 1、创建虚拟dom
      const VDOM = (
        <div>
          <h1>前端js框架</h1>
          <ul>
            {data.map((i, index) => {
              return <li key={index}>{i}</li>;
            })}
          </ul>
        </div>
      ); //此处一定不加引号，不是字符串
      // 2、渲染虚拟dom到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>

1.4 模块与组件、模块化与组件化的理解

1.4.1 模块

1.理解：向外提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3.作用：复用js, 简化js的编写, 提高js运行效率

1.4.2 组件

1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件：一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 提高运行效率

1.4.3 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

1.4.4 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

二、React面向组件编程

2.1 基本理解和使用

2.1.1 基础用法

函数式组件

 <!-- 创建好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      // 1、创建函数式组件
      function MyComponent() {
        console.log(this); //此处的this是undefined,因为babel开启了严格模式
        return <h2>定义函数式组件（适用于简单组件）</h2>;
      }
      // 2、渲染虚拟dom到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
      /**
       * 执行了ReactDOM.render(<MyComponent />...之后，发生了什么？
       * 1.React解析组件标签，找到MyComponent组件
       * 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，呈现在页面上。
       */
    </script>

类式组件

 <!-- 创建好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      // 1、创建类式组件
      class MyComponent extends React.Component {
        render() {
          // render是放在哪里的?—— MyComponent的原型对象上，供实例使用
          // render中的this是谁?—— MyComponent的实例对象
          return <h2>定义类式组件（适用于复杂组件）</h2>;
        }
      }
      // 2、渲染虚拟dom到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
      /**
       * 执行了ReactDOM.render(<MyComponent />...之后，发生了什么？
       * 1.React解析组件标签，找到MyComponent组件
       * 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
       * 3.将render返回的虚拟DOM转为真实DOM，呈现在页面上。
       */
    </script>

注意：
1.组件名必须首字母大写
2.虚拟DOM元素只能有一个根元素
3.虚拟DOM元素必须有结束标签

2.1.2 渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部

2.2 组件三大核心属性1: state

2.2.1 理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.2.2 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
a)强制绑定this: 通过函数对象的bind()
b)箭头函数
状态数据，不能直接修改或更新，必须使用setState

2.2.3 示例

需求：
定义一个展示天气信息的组件
1.默认展示天气炎热或凉爽
2.点击文字切换天气

<!-- 创建好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      // 1、创建类式组件
      class Weather extends React.Component {
        // 构造器调用一次
        constructor(props) {
          super(props);
          this.state = { isHot: true };
          // 解决changeWeather中this指向问题
          this.changeWeather = this.changeWeather.bind(this);
        }
        // render 调用1+n次 1是初始化的那次，n是状态更新的次数
        render() {
          return (
            <h2 onClick={this.changeWeather}>
              今天天气很{this.state.isHot ? "炎热" : "凉爽"}
            </h2>
          );
        }

        changeWeather() {
          const isHot = this.state.isHot;
          // 严重注意：状态必须通过setState进行更新
          this.setState({ isHot: !isHot });
        }
      }
      // 2、渲染虚拟dom到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>

简写形式

  <script type="text/babel">
      // 1、创建类式组件
      class Weather extends React.Component {
        state = { isHot: true };
        render() {
          return (
            <h2 onClick={this.changeWeather}>
              今天天气很{this.state.isHot ? "炎热" : "凉爽"}
            </h2>
          );
        }
        //自定义方法——要用赋值语句的形式+箭头函数
        changeWeather = () => {
          const isHot = this.state.isHot;
          this.setState({ isHot: !isHot });
        };
      }
      // 2、渲染虚拟dom到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>

2.3 组件三大核心属性2: props

2.3.1 理解

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

2.3.2 作用

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据，因为props是只读的

2.3.3 编码操作

1.内部读取某个属性值
this.props.name
2.对props中的属性值进行类型限制和必要性限制
第一种方式（React v15.5 开始已弃用）：
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
}
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
}
3.扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
4.默认属性值：
Person.defaultProps = {
age: 18,
sex:'男'
}

5.组件类的构造函数
构造器中是否接受props，是否传递给super，取决于：是否需要在构造器中通过this访问props
constructor(props){
super(props)
console.log(props)//打印所有属性
}

2.3.4 示例

自定义用来显示一个人员信息的组件
1.姓名必须指定，且为字符串类型；
2.性别为字符串类型，如果性别没有指定，默认为男
年龄为为数字类型，默认值为18

<!-- 创建好一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
      // 1、创建类式组件
      class Person extends React.Component {
        render() {
          const { name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age + 1}</li>
            </ul>
          );
        }
      }
      // 对标签属性进行类型必要性的限制
      Person.propTypes = {
        name: PropTypes.string.isRequired, //限制name必传，且为字符串
        sex: PropTypes.string, //限制sex为字符串
        age: PropTypes.number, //限制age为数字
        speak: PropTypes.func, //限制speak为函数
      };
      // 指定标签属性默认值
      Person.defaultProps = {
        sex: "男", //sex默认值为男
        age: 18, //age默认值为18
      };
      // 2、渲染虚拟dom到页面
      ReactDOM.render(
        <Person name="gqe" age={18} sex="女" speak={speak} />,
        document.getElementById("test1")
      );
      ReactDOM.render(
        <Person name="zzx" age={19} sex="男" />,
        document.getElementById("test2")
      );
      const p = { name: "tom", age: 20, sex: "女" };
      ReactDOM.render(<Person {...p} />, document.getElementById("test3"));

      function speak() {
        console.log("我说话了！");
      }
    </script>

简写方式

 <script type="text/babel">
      // 1、创建类式组件
      class Person extends React.Component {
        // 对标签属性进行类型必要性的限制
        static propTypes = {
          name: PropTypes.string.isRequired, //限制name必传，且为字符串
          sex: PropTypes.string, //限制sex为字符串
          age: PropTypes.number, //限制age为数字
          speak: PropTypes.func, //限制speak为函数
        };
        // 指定标签属性默认值
        static defaultProps = {
          sex: "男", //sex默认值为男
          age: 18, //age默认值为18
        };
        render() {
          const { name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age + 1}</li>
            </ul>
          );
        }
      }

      // 2、渲染虚拟dom到页面
      ReactDOM.render(
        <Person name="gqe" age={18} sex="女" speak={speak} />,
        document.getElementById("test1")
      );
      ReactDOM.render(
        <Person name="zzx" age={19} sex="男" />,
        document.getElementById("test2")
      );
      const p = { name: "tom", age: 20, sex: "女" };
      ReactDOM.render(<Person {...p} />, document.getElementById("test3"));

      function speak() {
        console.log("我说话了！");
      }
    </script>

2.3.5 函数式组件使用props

 <!-- 创建好一个容器 -->
    <div id="test1"></div>

    <!-- 引入react核心库，核心库必须最先引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
      // 1、函数式组件
      function Person(props) {
        return (
          <ul>
            <li>姓名：{props.name}</li>
            <li>性别：{props.sex}</li>
            <li>年龄：{props.age + 1}</li>
          </ul>
        );
      }

      // 对标签属性进行类型必要性的限制
      Person.propTypes = {
        name: PropTypes.string.isRequired, //限制name必传，且为字符串
        sex: PropTypes.string, //限制sex为字符串
        age: PropTypes.number, //限制age为数字
        speak: PropTypes.func, //限制speak为函数
      };
      // 指定标签属性默认值
      Person.defaultProps = {
        sex: "男", //sex默认值为男
        age: 18, //age默认值为18
      };

      // 2、渲染虚拟dom到页面
      ReactDOM.render(
        <Person name="gqe" age={18} sex="女" />,
        document.getElementById("test1")
      );
    </script>

2.4 组件三大核心属性3: refs与事件处理

2.4.1 理解

组件内的标签可以定义ref属性来标识自己

2.4.2 编码及示例

需求: 自定义组件, 功能说明如下:

点击按钮, 提示第一个输入框中的值
当第2个输入框失去焦点时, 提示这个输入框中的值

1.字符串形式的ref
<input ref="input1"/>

<!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM-->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于讲jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 创建组件
      class Demo extends React.Component {
        // 展示左侧输入框的数据
        showData = () => {
          const { input1 } = this.refs;
          alert(input1.value);
        };
        showData2 = () => {
          const { input2 } = this.refs;
          alert(input2.value);
        };
        render() {
          return (
            <div>
              <input ref="input1" type="text" placeholder="点击按钮提示数据" />{" "}
              &nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>
              &nbsp;
              <input
                type="text"
                ref="input2"
                onBlur={this.showData2}
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }
      // 渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

2.回调形式的ref
<input ref={(c)=>{this.input1 = c}} />

 <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM-->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于讲jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 创建组件
      class Demo extends React.Component {
        // 展示左侧输入框的数据
        showData = () => {
          const { input1 } = this;
          alert(input1.value);
        };
        showData2 = () => {
          const { input2 } = this;
          alert(input2.value);
        };
        render() {
          return (
            <div>
              <input
                ref={c => (this.input1 = c)}
                type="text"
                placeholder="点击按钮提示数据"
              />
              &nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>
              &nbsp;
              <input
                type="text"
                ref={c => (this.input2 = c)}
                onBlur={this.showData2}
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }
      // 渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

3.createRef创建ref容器
myRef = React.createRef()
<input ref={this.myRef}/>

<!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM-->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于讲jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 创建组件
      class Demo extends React.Component {
        // React.createRef()调用后返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”
        myRef = React.createRef();
        myRef1 = React.createRef();
        // 展示左侧输入框的数据
        showData = () => {
          alert(this.myRef.current.value);
        };
        showData2 = () => {
          alert(this.myRef1.current.value);
        };
        render() {
          return (
            <div>
              <input
                ref={this.myRef}
                type="text"
                placeholder="点击按钮提示数据"
              />
              &nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>
              &nbsp;
              <input
                type="text"
                ref={this.myRef1}
                onBlur={this.showData2}
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }
      // 渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

2.4.3 事件处理

通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了高效
通过event.target得到发生事件的DOM元素对象——不要过度的使用ref

 <script type="text/babel">
      // 创建组件
      class Demo extends React.Component {
        // React.createRef()调用后返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”
        myRef = React.createRef();
        myRef1 = React.createRef();
        // 展示左侧输入框的数据
        showData = () => {
          alert(this.myRef.current.value);
        };
        showData2 = event => {
          alert(event.target.value);
        };
        render() {
          return (
            <div>
              <input
                ref={this.myRef}
                type="text"
                placeholder="点击按钮提示数据"
              />
              &nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>
              &nbsp;
              <input
                type="text"
                onBlur={this.showData2}
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }
      // 渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

2.5 组件的生命周期

2.5.1 理解

组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

2.5.2 生命周期流程图(旧)

在这里插入图片描述
生命周期的三个阶段（旧）

初始化阶段: 由ReactDOM.render()触发—初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount() 常用，一般在该钩子中做一些初始化的事，例如：开启定时器，发送网络请求，订阅消息
更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount() 常用，一般在该钩子中做一些收尾的事，例如：关闭定时器，取消订阅消息

2.5.3 示例

  <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM-->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于讲jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("count---constructor");
          super(props);
          this.state = {
            count: 0,
          };
        }
        // 加1按钮回调
        add = () => {
          const { count } = this.state;
          this.setState({ count: count + 1 });
        };
        // 卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 强制更新按钮的回调
        force = () => {
          this.forceUpdate();
        };
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log("count---componentWillMount");
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("count---componentDidMount");
        }
        // 组件将要卸载的钩子
        componentWillUnmount() {
          console.log("count---componentWillUnmount");
        }
        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("count---shouldComponentUpdate");
          return true;
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log("count---componentWillUpdate");
        }
        // 组件更新完毕的钩子
        componentDidUpdate() {
          console.log("count---componentDidUpdate");
        }
        render() {
          console.log("count---render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为:{count}</h2>
              <button onClick={this.add}>点我+1</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>
                不更改任何状态中的数据，强制更新一下
              </button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>

结果
在这里插入图片描述

2.5.4 生命周期流程图(新)

在这里插入图片描述
生命周期的三个阶段（新）

初始化阶段: 由ReactDOM.render()触发—初次渲染
1.constructor()
2.getDerivedStateFromProps
3.render()
4.componentDidMount()
更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate
5.componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()

2.5.5 示例

 <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../newjs/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM-->
    <script
      type="text/javascript"
      src="../newjs/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于讲jsx转为js -->
    <script type="text/javascript" src="../newjs/babel.min.js"></script>
    <script type="text/babel">
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log("count---constructor");
          super(props);
          this.state = {
            count: 0,
          };
        }
        // 加1按钮回调
        add = () => {
          const { count } = this.state;
          this.setState({ count: count + 1 });
        };
        // 卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 强制更新按钮的回调
        force = () => {
          this.forceUpdate();
        };
        // 若state的值在任何时候都取决于props，那么可以使用
        static getDerivedStateFromProps() {
          console.log("count---getDerivedStateFromProps");
          return {};
        }
        getSnapshotBeforeUpdate() {
          console.log("count---getSnapshotBeforeUpdate");
          return null;
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log("count---componentDidMount");
        }
        // 组件将要卸载的钩子
        componentWillUnmount() {
          console.log("count---componentWillUnmount");
        }
        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log("count---shouldComponentUpdate");
          return true;
        }
        // 组件更新完毕的钩子
        componentDidUpdate() {
          console.log("count---componentDidUpdate");
        }
        render() {
          console.log("count---render");
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和为:{count}</h2>
              <button onClick={this.add}>点我+1</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>
                不更改任何状态中的数据，强制更新一下
              </button>
            </div>
          );
        }
      }
      ReactDOM.render(<Count />, document.getElementById("test"));
    </script>

2.5.6 getSnapshotBeforeUpdate用法

<!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../newjs/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM-->
    <script
      type="text/javascript"
      src="../newjs/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于讲jsx转为js -->
    <script type="text/javascript" src="../newjs/babel.min.js"></script>
    <script type="text/babel">
      class NewsList extends React.Component {
        state = { newsArr: [] };

        componentDidMount() {
          setInterval(() => {
            const { newsArr } = this.state;
            const news = "新闻" + (newsArr.length + 1);
            this.setState({ newsArr: [news, ...newsArr] });
          }, 1000);
        }

        getSnapshotBeforeUpdate() {
          return this.refs.list.scrollHeight;
        }

        componentDidUpdate(preProps, preState, height) {
          this.refs.list.scrollTop += this.refs.list.scrollHeight - height;
        }

        render() {
          return (
            <div className="list" ref="list">
              {this.state.newsArr.map((n, index) => {
                return (
                  <div key={index} className="news">
                    {n}
                  </div>
                );
              })}
            </div>
          );
        }
      }
      ReactDOM.render(<NewsList />, document.getElementById("test"));
    </script>

结果
在这里插入图片描述

2.5.7 总结

重要的勾子
1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax请求
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器
即将废弃的勾子
1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

三、React应用(基于React脚手架)

3.1 使用create-react-app创建react应用

3.1.1 react脚手架

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
1.包含了所有需要的配置（语法检查、jsx编译、devServer…）
2.下载好了所有相关的依赖
3.可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3.1.2 创建项目并启动

第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

3.1.3 react脚手架项目结构

public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js ------ 页面性能分析文件(需要web-vitals库的支持)
setupTests.js ------ 组件单元测试的文件(需要jest-dom库的支持)

四、React ajax

4.1 理解

4.1.1. 前置说明

React本身只关注于界面, 并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互(json数据)
react应用中需要集成第三方ajax库(或自己封装)

4.1.2. 常用的ajax请求库

jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
1)封装XmlHttpRequest对象的ajax
2)promise风格
3)可以用在浏览器端和node服务器端

4.2. axios

4.2.1. 文档

https://github.com/axios/axios

4.2.2. 相关API

1)GET请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2)POST请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

4.3. 消息订阅-发布机制

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
1）先订阅，再发布，
2）适用于组件间通信
3）要在组件的componentWillUnmount中取消订阅

import PubSub from ‘pubsub-js’ 引入
PubSub.subscribe(‘delete’, function(data){ }); //订阅
PubSub.publish(‘delete’, data) //发布消息

4.4 扩展：Fetch

4.4.1. 文档

4.4.2. 特点

fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
老版本浏览器可能不支持

4.4.3. 相关API

1)GET请求
写法一

fetch(url).then(function(response) {
    return response.json()
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  });

写法二

try {
	const response= await fetch(`/api1/search/users2?q=${keyWord}`)
	const data = await response.json()
} catch (error) {
	console.log('请求出错',error);
}

2)POST请求

  fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  })

4.4.4 小知识

ES6小知识：解构赋值+重命名

let obj = {a:{b:1}}
const {a} = obj //传统解构赋值
const {a:{b}} = obj //连续解构赋值
const {a:{b:value}} = obj //连续解构赋值+重命名

五、React路由

5.1. 相关理解

5.1.1. SPA的理解

单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。

5.1.2. 路由的理解

什么是路由?
1.一个路由就是一个映射关系(key:value)
2.key为路径, value可能是function或component
路由分类
1.后端路由：

1)理解： value是function, 用来处理客户端提交的请求。
2)注册路由： router.get(path,function(req, res))
3)工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

1)浏览器端路由，value是component，用于展示页面内容。
2)注册路由: <Route path="/test"component={Test}>
3)工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

5.1.3. react-router-dom的理解

react的一个插件库。
专门用来实现一个SPA应用。
基于react的项目基本都会用到此库。

5.2. react-router-dom相关API

5.2.1. 内置组件

1. <BrowserRouter />
2. <HashRouter />
3.<Route />
4.<Redirect />
5.<Link />
6.<NavLink />
7.<Switch />

5.2.2. 其它

history对象
match对象
withRouter函数

5.2.3 下载React路由

下载react-router-dom: npm install --save react-router-dom

5.3 路由的基本使用

明确好界面中的导航区、展示区
导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

5.4 路由组件与一般组件

写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
存放位置不同：
一般组件：components
路由组件：pages
接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
1)history:
    go: ƒ go(n)
    goBack: ƒ goBack()
    goForward: ƒ goForward()
    push: ƒ push(path, state)
    replace: ƒ replace(path, state)
2)location:
    pathname: “/about”
    search: “”
    state: undefined
3)match:
    params: {}
    path: “/about”
    url: “/about”

5.5 NavLink与封装NavLink

1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
NavLink的封装
MyNavLink.jsx

<NavLink
    activeClassName="active"
    className="list-group-item"
    {...this.props}
/>

MyNavLink的使用

<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>

5.6 Switch的使用

通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。

 <Switch>
   <Route path="/about" component={About} />
   <Route path="/home" component={Home} />
</Switch>

5.7 解决多级路径刷新页面样式丢失的问题

public/index.html 中引入样式时不写 ./ 写 / （常用）
public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
使用HashRouter

5.8、路由的严格匹配与模糊匹配

默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

gqe_it

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记

react学习总结
复制链接

扫一扫

专栏目录