React讲解（详细&&带有注解解释）

其他 2021-12-14 14:28:02 阅读次数: 0

因为比较详细，也带有 用法的详细解释（以注解的形式），包含每个知识相关的demo。请大家耐心看完！！！

目录

在这里插入图片描述

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React 安装

React 可以直接下载使用，下载包中也提供了很多学习的实例。

本教程使用了 React 的版本为 16.4.0，你可以在官网 https://reactjs.org/ 下载最新版。

你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

1.Hello React

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
    <!-- 准备好一个容器-->
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <!-- 引入react核心库 -->
    <script src="setting/react.development.js" type="text/javascript"></script>
    <!-- 引入react扩展库 -->
    <script src="setting/react-dom.development.js" type="text/javascript"></script>
    <!-- 引入jsx解释器将jsx转为js -->
    <script src="setting/babel.min.js" type="text/javascript"></script>

</head>

<body>
    <div id="example">
        <p>dksajdskaljdlas</p>
    </div>
    <script type="text/babel">
        /*     ReactDOM.render(
                 <h1>Hello,world</h1>,
                 document.getElementById('example')
             ); */
        // class在react内是关键字，不能作为属性进行操作，如果需要绑定class的话，我们可以使用className
        // const H1Dom = <h1 className="h1-dom" id="h1-dom" style={true?{color:"#efefef"}:""}>我是大标题</h1>
        const H1Dom = <h1 className="h1-dom" id="h1-dom" style={
      
      {
      
       color: "#efefef", fontSize: "20px" }}>我是大标题</h1>
        const H2Dom = (Props) => {
      
      
            let text = Props.title ? Props.title : '小标题'
            return <h2>{
      
      text}</h2>
        }
        const H3Dom = React.createElement('h3', '', '这是h3标题')
        
        class H4Dom extends React.Component{
      
      
            constructor(props){
      
      
                super(props)
            }
            render(){
      
      
                return <h4>这是h4标签</h4>
            }
        }
        //render 方法可以接收两个参数
        // 1--虚拟的dom
        // 2--虚拟dom的安放处
        ReactDOM.render(
            // H1Dom,
            // <H2Dom />,
            // H3Dom,
                  <H4Dom />,
            document.getElementById('example')
        );
    </script>
</body>

</html>

2.虚拟DOM的两种创建方式

使用jsx创建DOM

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../setting/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../setting/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>

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

</html>

使用js创建DOM

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../setting/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../setting/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>
</body>

</html>

虚拟DOM和真实的dom

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>hello_react</title>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="demo"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../setting/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../setting/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>

    <script type="text/babel">  /*此处一定写babel*/
        //1.创建虚拟dom
        const VDOM = (
            <h1 id="title">
                <span>hello react</span>
            </h1>
        )    /*此处一定不要写引号，因为不是字符串*/
        //2.渲染虚拟dom到页面
        ReactDOM.render(VDOM,document.getElementById('test'));
        console.log('虚拟dom',VDOM)
        const TDOM=document.getElementById('demo')
        console.log('真实dom',TDOM)
        console.log(typeof VDOM)
        console.log(VDOM instanceof Object)
    </script>
</body>

</html>

3.jsx语法规则

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">


    <title>hello_react</title>
    <style>
        .title {
      
      
            background-color: aqua;
            width: 200px;
        }
    </style>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="demo"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../setting/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../setting/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>

    <script type="text/babel">  /*此处一定写babel*/
        const myId = 'GPSmODSTY'
        const myData = "gpsModesty"
        //1.创建虚拟dom
        const VDOM = (
            <div>
                <h2 className='title' id={
      
      myId.toLowerCase()}>
                    <span style={
      
      {
      
       color: 'white', fontSize: '30px' }}>   {
      
      myData.toLowerCase()}</span>
                </h2>
                <h2 className='title' id={
      
      myId.toUpperCase()}>
                    <span style={
      
      {
      
       color: 'white', fontSize: '30px' }}>{
      
      myData.toUpperCase()}</span>
                </h2>
                <input type="text" />
                <Good>123</Good>
            </div>

        )
        //2.渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById('test'));
      /*  jsx语法规则：
                1.定义虚拟dom时,不要写引号
                2.标签中混入js表达式时候，要用{}
                3.样式的类名指定不要用class，要用className
                4.内联样式，要用style={
      
      {key,value}}的形式去写
                5.虚拟dom必须只有一个根标签
                6.标签必须闭合
                7.标签首字母
                    1.若小写字母开头，则将该标签转为HTML同名元素。如无该标签对应的同名元素，则报错
                    2.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
        */
    </script>
</body>

</html>

4.jsx的小练习

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>jsx小练习</title>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!--引入react核心库-->
    <script type="text/javascript" src="../setting/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../setting/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>

    <script type="text/babel">
        //模拟一些数据
        const data = ['GPS', 'React', 'Modesty']
        //1.创建虚拟dom
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
      
      
                        data.map((item,index) => {
      
      
                            return <li key={
      
      index}>{
      
      item}</li>
                        })
                    }
                </ul>
            </div>

        )
        //2.渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</body>

</html>

5.react中定义组件

函数式组件

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>jsx小练习</title>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>


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

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

</html>

类式组件

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>创建类式组件</title>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>


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

    <script type="text/babel">
        //1.创建类式组件
       class MyComponent extends React.Component{
      
      
            render(){
      
      
                return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
            }
       }
       //2.渲染组件到页面
       ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    </script>
</body>

</html>

6.组件实例三大属性：state、props、ref

state标准形式

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>state组件</title>
</head>

<body>

    <!-- 准备好一个“容器” -->
    <div id="test"></div>


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

    <script type="text/babel">
        //1.创建类式组件
        class Weather extends React.Component {
      
      
            constructor(props) {
      
      
                super(props)
                this.state = {
      
       isHot: true }
                this.changeWeather = this.changeWeather.bind(this)
            }
            render() {
      
      

                return <h1 onClick={
      
      this.changeWeather}>今天的天气很{
      
      this.state.isHot ? '炎热' : '凉爽'}</h1>
            }
            changeWeather() {
      
      
                const isHot = this.state.isHot
                this.setState({
      
      isHot:!isHot})
           
            }
        }
        //2.渲染组件到页面
        ReactDOM.render(<Weather />, document.getElementById('test'))

    </script>
</body>

</html>

state简写模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>state组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

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

    <script type="text/babel">
      //1.创建类式组件
      class Weather extends React.Component {
      
      
        state = {
      
       isHot: true };

        render() {
      
      
          return (
            <h1 onClick={
      
      this.changeWeather}>
              今天的天气很{
      
      this.state.isHot ? "炎热" : "凉爽"}
            </h1>
          );
        }
        changeWeather = () => {
      
      
          const isHot = this.state.isHot;
          this.setState({
      
       isHot: !isHot });
        };
      }
      //2.渲染组件到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

props

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!--引入react核心库-->
    <script
      type="text/javascript"
      src="../setting/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../setting/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../setting/prop-types.js"></script>
    <script type="text/babel">
      //创建组件
      class Person extends React.Component {
      
      
        render() {
      
      
          const {
      
       name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名:{
      
      name}</li>
              <li>年龄:{
      
      age}</li>
              <li>性别:{
      
      sex}</li>
            </ul>
          );
        }
      }
      Person.propTypes = {
      
      
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
        speak:PropTypes.func
      };
      Person.defaultProps={
      
      
        sex:"男",
        age:18
      }
      //渲染组件到页面

      const p = {
      
       name: "GPS", age: 123, sex: "男"  };
      ReactDOM.render(<Person {
      
      ...p}  />, document.getElementById("test"));

      function speak(){
      
      
        console.log("123");
      }
    </script>
  </body>
</html>

props的简写方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!--引入react核心库-->
    <script
      type="text/javascript"
      src="../setting/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../setting/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../setting/prop-types.js"></script>
    <script type="text/babel">
      //创建组件
      class Person extends React.Component {
      
      
        static propTypes = {
      
      
          name: PropTypes.string.isRequired,
          sex: PropTypes.string,
          age: PropTypes.number,
          speak: PropTypes.func,
        };
        static defaultProps = {
      
      
          sex: "男",
          age: 18,
        };
        render() {
      
      
          const {
      
       name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名:{
      
      name}</li>
              <li>年龄:{
      
      age}</li>
              <li>性别:{
      
      sex}</li>
            </ul>
          );
        }
      }

      //渲染组件到页面
      ReactDOM.render(<Person name="gps" />, document.getElementById("test"));
      function speak() {
      
      
        console.log("123");
      }
    </script>
  </body>
</html>

函数式组件使用Props

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!--引入react核心库-->
    <script
      type="text/javascript"
      src="../setting/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../setting/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../setting/prop-types.js"></script>
    <script type="text/babel">
      //创建组件
      function Person(props) {
      
      
        const {
      
       name, age, sex } = props;
        return (
          <ul>
            <li>姓名：{
      
      name}</li>
            <li>年龄：{
      
      age}</li>
            <li>性别：{
      
      sex}</li>
          </ul>
        );
      }
      //渲染组件到页面
      ReactDOM.render( <Person name="GPS" age={
      
      123} sex="男" />, document.getElementById("test"));
    </script>
  </body>
</html>

字符串形式ref

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!--引入react核心库-->
    <script
      type="text/javascript"
      src="../setting/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../setting/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../setting/prop-types.js"></script>
    <script type="text/babel">
      //创建组件
      class Demo extends React.Component {
      
      
        //展示左侧输入框的数据
        showData = () => {
      
      
          const {
      
       input1 } = this.refs;
          console.log(input1.value);
          alert(input1.value);
        };
        showData2 = () => {
      
      
          const {
      
       input2 } = this.refs;
          console.log(input2.value);
          alert(input2.value);
        };

        render() {
      
      
          return (
            <div>
              <input ref="input1" type="text" placeholder="点击按钮提示数据" />
              <button onClick={
      
      this.showData}>点我提示左侧的数据</button>
              <input
                onBlur={
      
      this.showData2}
                ref="input2"
                type="text"
                placeholder="失去焦点提示数据"
               />
            </div>
          );
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

回调函数的形式ref

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!--引入react核心库-->
    <script
      type="text/javascript"
      src="../setting/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../setting/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../setting/prop-types.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={
      
      (lNode) => (this.input1 = lNode)}
                type="text"
                placeholder="点击按钮提示数据"
              />
              <button onClick={
      
      this.showData}>点我提示左侧的数据</button>
              <input
                onBlur={
      
      this.showData2}
                ref={
      
      (rNode) => (this.input2 = rNode)}
                type="text"
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

回调函数的形式ref 次数问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!--引入react核心库-->
    <script
      type="text/javascript"
      src="../setting/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../setting/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../setting/prop-types.js"></script>
    <script type="text/babel">
      //创建组件
      class Demo extends React.Component {
      
      
        state = {
      
       isHost: false };
        showData = () => {
      
      
          const {
      
       input1 } = this;
          alert(input1.value);
        };
        changeWeather = () => {
      
      
          //获取原来的状态
          const {
      
       isHost } = this.state;
          //更新状态
          this.setState({
      
       isHost: !isHost });
        };
        saveInput = (c) => {
      
      
          this.input1 = c;
          console.log(c);
        };
        render() {
      
      
          const {
      
       isHost } = this.state;
          return (
            <div>
              <h1>今天的天气很{
      
      isHost ? "炎热" : "凉爽"}</h1>
              {
      
      /*<input ref={(lNode) => {this.input1 = lNode;console.log("@", lNode);}}type="text"placeholder="点击按钮提示数据"/>*/}
              <input
                ref={
      
      this.saveInput}
                type="text"
                placeholder="点击按钮提示数据"
              />
              <br /> <br />
              <button onClick={
      
      this.showData}>点我提示左侧的数据</button>
              <br />
              <br />
              <button onClick={
      
      this.changeWeather}>点我更新天气</button>
            </div>
          );
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

createRef

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!--引入react核心库-->
    <script
      type="text/javascript"
      src="../setting/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../setting/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../setting/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../setting/prop-types.js"></script>
    <script type="text/babel">
      //创建组件
      class Demo extends React.Component {
      
      
        myRef=React.createRef()
        state = {
      
       isHost: false };
        showData = () => {
      
      
          // const { input1 } = this;
          // alert(input1.value);
          alert(this.myRef.current.value);
        };
        changeWeather = () => {
      
      
          //获取原来的状态
          const {
      
       isHost } = this.state;
          //更新状态
          this.setState({
      
       isHost: !isHost });
        };
      
        saveInput = (c) => {
      
      
          this.input1 = c;
          console.log(c);
        };
        render() {
      
      
          const {
      
       isHost } = this.state;
          return (
            <div>
              <h1>今天的天气很{
      
      isHost ? "炎热" : "凉爽"}</h1>
              <input ref={
      
      this.myRef} type="text"placeholder="点击按钮提示数据"/>
              <br /> <br />
              <button onClick={
      
      this.showData}>点我提示左侧的数据</button>
              <br />
              <br />
              <button onClick={
      
      this.changeWeather}>点我更新天气</button>
            </div>
          );
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>

7.react收集表单的数据

1_非受控组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>非受控组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

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

    <script type="text/babel">
      //创建组件
      class Login extends React.Component {
      
      
        handleSubmit=(event)=>{
      
      
            event.preventDefault();//阻止表单提交
            //函数体
            const {
      
      username,password}=this
            alert(`你输入的用户名是:${ 
        username.value}密码是${ 
        password.value}`)
        }
        render() {
      
      
          return (
            <form onSubmit={
      
      this.handleSubmit}>
              用户名：<input ref={
      
      c=>this.username=c} type="text"  name="username"/> &nbsp;
              密码：<input ref={
      
      c=>this.password=c}  type="password"  name="password" />&nbsp;
              <button>登录</button>
            </form>
          );
        }
      }

      //渲染组件到页面
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>
  </body>
</html>

2_受控组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>受控组件</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

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

    <script type="text/babel">
      //创建组件
      class Login extends React.Component {
      
      
        state ={
      
      
          username:'',
          password:''
        }
         
        saveFormaData=(dataType)=>{
      
      
         
          return (event)=>{
      
      
              this.setState({
      
      [dataType]:event.target.value})
          }
        }
        

        handleSubmit=(event)=>{
      
      
            event.preventDefault();//阻止表单提交
            //函数体
            const {
      
      username,password}=this.state
             alert(`你输入的用户名是:${ 
        username}密码是${ 
        password}`)
        }
        render() {
      
      
          return (
            <form onSubmit={
      
      this.handleSubmit}>
              用户名：<input onChange={
      
      this.saveFormaData('username')} type="text"  name="username"/> &nbsp;
              密码：<input onChange={
      
      this.saveFormaData('password')}  type="password"  name="password" />&nbsp;
              <button>登录</button>
            </form>
          );
        }
      }

      //渲染组件到页面
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>
  </body>
</html>

8.React 组件生命周期

组件的生命周期可分成三个状态：

Mounting(挂载)：已插入真实 DOM
Updating(更新)：正在被重新渲染
Unmounting(卸载)：已移出真实 DOM
在这里插入图片描述

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor(): 在 React 组件挂载之前，会调用它的构造函数。
getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。
render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

更新

每当组件的 state 或 props 发生变化时，组件就会更新。

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
componentDidUpdate(): 在更新后会被立即调用。
render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

卸载

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount(): 在组件卸载及销毁之前直接调用。

下面是当前时间的实例

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
 
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, Runoob!</h1>
        <h2>现在时间是：{this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

猜你喜欢

转载自blog.csdn.net/gps666666/article/details/121576706
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022