React入门（1）{环境准备、快速入门、组件、事件}

最新推荐文章于 2023-05-17 02:42:47 发布

！没事

最新推荐文章于 2023-05-17 02:42:47 发布

阅读量550

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59684494/article/details/121791623

版权

React 起源于FaceBook Ins的产品[分享图片],研发的内部项目.
后来2013年开源了.2016年大前端时代.
用来构建用户界面的JavaScript库
React官网: https://react.docschina.org/

一、环境准备

插件：

代码格式化

本地开发服务器

智能代码提示

自动修改双标签

ES6代码片段提示

React代码提示

二、快速入门

React官网: https://react.docschina.org/

书写方式:

脚本引入方式 script标签适合初学入门使用

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

react.development.js react库组件虚拟DOM对象

react-dom.development.js react dom操作库操作DOM渲染 render

如果网络正常情况下,可以在html页面中,直接引入它们使用

脚手架方式类似vue-cli 工程化方式构建应用企业开发使用

create-react-app

React封装方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React入门</title>
  </head>
  <body>
    <!-- 挂载点 代表之后的内容插入到这里 -->
    <div id="root"></div>

    <!-- 引入相关react相关库文件 react 注意顺序 react-dom-->
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>

    <!-- 页面的js代码  -->
    <script>
      // 1.创建一个虚拟DOM对象
      //参数结构  1.标签 2.属性 3.内容
      const vNode = React.createElement(
        "div",
        { id: "mydiv", className: "cls" },
        "hello React!"
      );
      // 2.获取挂在对象
      const root = document.getElementById("root");
      // 3.页面渲染
      //参数 虚拟DOM  挂在对象
      ReactDOM.render(vNode, root);
    </script>
  </body>
</html>

JSX语法

在JS中声明虚拟DOM对象,生成html代码标签方式.使用和修改起来都不是太方便.如何能够像之前一直在JS声明 html代码,使用 html语法格式 .

JSX 在javascript中写xml[可扩展的标记性语法],类 html .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX语法</title>
  </head>
  <body>
    <!-- 挂载点 -->
    <div id="root"></div>
    <!-- 引入react react-dom -->
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>
    <!-- babel es6语法转es5语法使用 -->
    <!-- 引入babel -->
    <script src="./CODE/babel.min.js"></script>
    <!-- script 代码内容如果需要babel处理需要 加入 type="text/babel" -->
    <script type="text/babel">
      //1.创建对象
      //JSX语法 类HTML雨大 不完全一样  加（）属于一行
      const vNode = (
        <div id="bydiv" className="cls">
          你好 ， react~
        </div>
      );
      // 2.渲染
      ReactDOM.render(vNode, document.getElementById("root"));
    </script>
  </body>
</html>

组件

组成页面的模块,这些模块可以进行复用

React定义组件的方式:

函数组件 rfc react function component 类名大驼峰
类组件 rcc react class component render方法，返回JSX语法标签

函数方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数组件</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>
    <script src="./CODE/babel.min.js"></script>
    <script type="text/babel">
      //利用函数的封装性和复用性实行组件的复用
      //规范 函数名称 要求大驼峰命名 首字母大写 与普通函数区分
      function Hello() {
        return <h1>hello 组件!</h1>;
      }
      let vNode = Hello();
      //复用 JSX语法中书写JS代码 需要通过{}包裹  必须在 div 盒子里面
      vNode = (
        <div>
          {/*注释新写法*/}
          {Hello()}
          {Hello()}
          {Hello()}
          {/*{}是JS代码部分*/}
          {2 + 3}
        </div>
      );
      //语法糖格式  标签调用方式 单标签记得写 /
      vNode = <Hello />;
      vNode = (
        <div>
          <Hello />
          <Hello />
          <Hello />
        </div>
      );
      ReactDOM.render(vNode, document.getElementById("root"));
    </script>
  </body>
</html>

函数组件传参

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数组件传参</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>
    <script src="./CODE/babel.min.js"></script>
    <script type="text/babel">
      //函数传参的方式 改变组件内部数据  形参 props 随意命名
      function HelloName(props) {
        // return <h1>Hello,{name}</h1>; ②

        return <h1>Hello,{props.name}</h1>;
      }
      //调用组件
      // let vNode = HelloName('react');②
      let vNode = HelloName({ name: "react" });
      //语法糖
      vNode = <HelloName name="博主" />;
      //复用
      vNode = (
        <div>
          <HelloName name="react" />
          <HelloName name="博主" />
          {HelloName({ name: "语法糖" })}
        </div>
      );

      ReactDOM.render(vNode, document.getElementById("root"));
    </script>
  </body>
</html>

类组件

通过类的方式定义组件关键字class

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类方式组件</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>
    <script src="./CODE/babel.min.js"></script>
    <script type="text/babel">
      //类组件 比函数的功能更为强大
      //之前的版本（16.8以前） 函数组件称为无状态组件[state]组件
      //类组件 [有状态组件] 具有state，生命周期
      //在16.8版本之后 引入 hook 特性，可以使用函数组件使用到state和生命周期
      // extends 继承了React组件父类 特性
      class Hello extends React.Component {
        //类成员包含： 类属性 变量 类方法
        //标签调用方式 默认调用render方法
        render() {
          return <h1>Hello 类组件!</h1>;
        }
      }
      //实例化
      let vNode = new Hello().render();
      //语法糖 标签调用方式
      vNode = <Hello />;
      //复用
      vNode = (
        <div>
          {new Hello().render()}
          {new Hello().render()}
          <Hello />
          <Hello />
        </div>
      );
      ReactDOM.render(vNode, document.getElementById("root"));
    </script>
  </body>
</html>

类方式组件传参

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类方式组件传参</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>
    <script src="./CODE/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component {
        //构造函数 方法 类实例化是触发
        // constructor() {
        //   //子类继承父类 调用super()来绑定父类的this
        //   super();
        //   console.log("实例化会触发");
        //   console.log(this);
        // }
        //类成员包含： 类属性 变量 类方法
        //标签调用方式 默认调用render方法
        render() {
          //this 当前对象 谁调用就是谁
          return <h1>Hello {this.props.msg}!</h1>;
        }
      }
      //实例化
      let vNode = new Hello({ msg: "类组件传参" }).render();
      //语法糖 标签调用方式
      vNode = <Hello msg="类组件传参-标签" />;
      //复用
      vNode = (
        <div>
          {new Hello({ msg: "博主" }).render()}
          {new Hello({ msg: "博主真帅" }).render()}
          <Hello msg="楼上说的对" />
          <Hello msg="嗯嗯嗯" />
        </div>
      );
      ReactDOM.render(vNode, document.getElementById("root"));
    </script>
  </body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>
    <script src="./CODE/babel.min.js"></script>
    <script type="text/babel">
      //类组件+事件处理方法
      class App extends React.Component {
        //通过函数/方法进行 封装 返回一个标签
        showName() {
          return <h1>React</h1>;
        }
        //处理点击事件
        show() {
          alert(
            "哈哈哈哈 隔! 你点到我了 哈哈哈哈 快！快！--快挪开！！！哈哈哈 隔！ "
          );
        }
        render() {
          return (
            //div 里面就是JSX语法 JS代码需要{}包裹
            //方法调用立即执行 需要加()
            // <div>哈哈哈哈哈 隔!</div>
            <div>
              {this.showName()}
              {/*React事件绑定是原生的JS语法*/}
              {/*事件触发是才调用 不加（）*/}
              {/* JSX语法中 的JS代码 不用{} 包裹 会被分为是字符串*/}
              <button onClick={this.show}>点我显示</button>
            </div>
          );
        }
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

事件的this指向问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件的this指向</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./CODE/react.development.js"></script>
    <script src="./CODE/react-dom.development.js"></script>
    <script src="./CODE/babel.min.js"></script>
    <script type="text/babel">
      //类组件+类属性+类方法
      class App extends React.Component {
        //类属性 变量
        name = "hello resct";
        //类方法  事件处理方法
        show() {
          /*
           *事件触发的this指向谁
           *非严格模式 指向window
           *严格模式 undefined react默认严格模式
           *解决方案：事件绑定this进行下传 绑定this
           *call,applay 替换this 触发执行
           *bind绑定替换this 不执行
           */
          console.log(this.name);
        }
        //定义为箭头函数方法
        show1 = () => {
          console.log(this);
          console.log(this.name);
        };
        render() {
          return (
            <div>
              {/*用户bind(this)把show方法的this[undefined]替换为App组件本身*/}
              {/*方法一 定义普通函数方法 调用bind绑定*/}
              <button onClick={this.show.bind(this)}>点击显示1</button>
              <br />
              {/*方法二 定义为箭头函数方法*/}
              <button onClick={this.show1}>点击显示2</button>
              <br />
              {/*方法三 箭头函数+普通函数*/}
              {/*点击触发的是箭头函数 箭头函数this不丢失 箭头函数内部再调用普通函数，
                this是不丢失 因为只有时间触发的普通函数 this才丢失*/}
              <button onClick={() => this.show()}>点击显示3</button>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

！没事

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React入门（1）{环境准备、快速入门、组件、事件}

React 起源于FaceBook Ins的产品[分享图片],研发的内部项目. 后来2013年开源了.2016年大前端时代. 用来构建用户界面的JavaScript库 React官网: https://react.docschina.org/一、环境准备插件：代码格式化本地开发服务器智能代码提示自动修改双标签ES6代码片段提示React代码提示二、快速入门React官网: https://react.docschina.org/书写.
复制链接

扫一扫