react介绍、下载安装、jsx模板语法介绍、组件、脚手架、事件处理、事件对象、组件状态数据的定义与更新

最新推荐文章于 2024-05-13 10:08:51 发布
最新推荐文章于 2024-05-13 10:08:51 发布
阅读量513 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyanqin2545/article/details/115259914
版权

一.介绍

react是facebook公司中由前端开发团队进行开发和维护

定义.

用于构建用户界面的JavaScript库

特点:

  • react是基于组件进行开发
  • 数据驱动和视图渲染相结合来构建单页面应用
  • react中没有基本指令,计算属性,过滤器,监听器等等
  • react中没有数据双向绑定
  • React是react.js的核心
  • Reactdom是react-dom.js的核心

二.下载安装

  • 方式一:
 <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>
  • 方式二
npm i react --save

三.核心对象及方法介绍

  • React
    • React是react.js的核心
React.createElement(标签名称,属性集合,内容)   #创建标签对象
  • ReactDOM
    • ReactDOM是react-dom.js的核心
ReactDOM.render(标签对象,真实的dom节点)		#将标签对象渲染到页面中

四.案例

  • demo
<!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>Document</title>
    <!-- development 开发模式下 -->
    <!-- 
        引入js文件
        1.引入react.js
        2.引入react-dom.js文件
     -->
    <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>

</head>
<body>
    <!-- 2.声明一个容器 -->
    <div id="app"></div>

    <script>
        // 1.创建一个元素对象
        /**
         * React是react.js的核心
        */
        // React.createElement(标签名称,属性集合,内容)

        const h1 = React.createElement('h1',{title:'第一次学习react',style:{background:'aqua',color:'yellow',border:'1px solid red'}},'React')
        // console.log(h1);


        // 将元素对象渲染到页面中
        /**
         * ReactDOM是react-don=m.js的核心
        */
    //    ReactDOM.render(标签对象,真实的dom节点)
        ReactDOM.render(h1,document.querySelector('#app'))
    </script>

</body>
</html>
  • 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>Document</title>
    <!-- development 开发模式下 -->
    <!-- 
        引入js文件
        1.引入react.js
        2.引入react-dom.js文件
     -->
     <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>
</head>
<body>
    <!-- 2.声明一个容器 -->
    <div id="app"></div>
    <script>
        const h1 = React.createElement('h1',{title:'标题一'},'首页');
        const img = React.createElement('img',{src:'./img/women.jpg'},null)
        const div = React.createElement('div',{className:'container'},h1,img)
        // console.log(div);

        ReactDOM.render(div,document.querySelector('#app'));
    </script>
</body>
</html>

五.jsx模板语法介绍

  • jsx(javascript xml)是在javascript的基础上结合了xml语法
  • jsx不被浏览器解析
  • jsx需要通过babel进行解析
  • jsx专门用于构建react项目的

1.xml语法结构

  • xml严格区分大小写
  • xml的双标签必须要有开始和结束
  • xml的单标签必须要有结束

2.jsx语法结构

  • ​ * 1.jsx需严格执行xml语法规范
  • ​ * 2.jsx模板双标签必须要有开始和结束
  • ​ * 3.jsx模板单标签必须要有结束
  • ​ * 4.jsx模板必须严格区分大小写
  • ​ * 5.jsx模板只能有一个根节点

3.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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 有一个容器 -->
    <div id="app"></div>

    <!-- 
        type="text/babel"  浏览器看到是text/babel类型,不做解析,交给babel进行解析
     -->
    <script type="text/babel">
        // 写jsx语法
        /**
         * 1.jsx需严格执行xml语法规范
         * 2.jsx模板双标签必须要有开始和结束
         * 3.jsx模板单标签必须要有结束
         * 4.jsx模板必须严格区分大小写
         * 5.jsx模板只能有一个根节点
        */
        const div = <div className="container">
                        <h1>标题一</h1>
                        <img src="./img/women.jpg" alt="美女" />
                    </div>
        // console.log(div);
        ReactDOM.render(div,document.querySelector('#app'));
    </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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 有一个容器 -->
    <div id="app"></div>

    <!-- 
        type="text/babel"  浏览器看到是text/babel类型,不做解析,交给babel进行解析
     -->
    <script type="text/babel">
        let msg = '标签一';
        let imgUrl = './img/women.jpg'
        const div = <div className="container">
                        <h1>{msg}</h1>
                        <img src={imgUrl} alt="美女" />
                    </div>
        // console.log(div);
        ReactDOM.render(div,document.querySelector('#app'));
    </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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const msg = 'i have an apple';
        function fn(str){
            return str.split('').reverse().join('');
        }
        const div  = <div className="container">
                       {/* 调用系统方法*/}
                       <div>{msg.toUpperCase()}</div>
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const msg = 'i have an apple';
        function fn(str){
            return str.split('').reverse().join('');
        }
        const div  = <div className="container">
                       {/*调用自定义方法*/}
                       {/*自定义方法中要有返回值*/}
                       <div>{fn(msg)}</div>
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

  • 模板注释

    • {/* 这是注释内容*/}

  • 条件渲染

    • 不能使用if结构做条件判断
    • 必须使用三元运算符做条件判断
<!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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
       let age = 10;
        const div  = <div className="container">
                        {/*在jsx模板中不能使用if结构*/}
                        {/*错误写法*/}
                        {/*<p>{if(age>=18){'已成年'}else{'未成年'}}</p>*/}

                        {/*写条件判断需要使用三元运算符*/}
                        <div>{age >= 18 ? '已成年' : '未成年'}</div>

                        {/*在jsx模板变量中可以嵌套jsx模板*/}
                        <div>{age >= 18 ? <h2>已成年</h2> : <h3>未成年</h3>}</div>
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>
  • 关键字
    • className在jsx模板语法中将标签属性class名称改为className
    • htmlFor在jsx模板语法中将标签属性for名称改为htmlFor
<!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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
      
        const div  = <div className="container">
                        <label htmlFor="search">搜索</label>
                        <input type="text" id="search" placeholder="请输入关键字" />
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>
  • 通过style指定行内样式
    • 需要使用{{}}来指定行内样式
    • 外层{}表示:jsx模板解析变量
    • 内层{}表示:一个json
<!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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: pink;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const style = {background:'pink',color:'green'}
        const div  = <div className="container">
                        {/*错误写法*/}
                        {/*<h1 style="background:'pink';color:'green';">一级标标题</h1>*/}

                        {/*
                            1.外层{}:表示jsx解析变量
                            2.内层{}:表示是一个json
                            
                        */}
                        <h1 style={style}>一级标标题</h1>
                        
                    </div>

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>
  • 列表的渲染
    • forEach
    • map
<!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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: black;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const arr = ['vue','react','angular'];
        const arr1 = [<h3 key="0">vue</h3>,<h3 key="1">react</h3>,<h3 key="2">angular</h3>];

        // forEach
        // 没有返回值
        let arr2 = [];
        arr.forEach(item=>{
            arr2.push(item)
        })

        //map
        let arr3 = arr.map((item,index)=>{
           return <h3 key={index}>{item}</h3>
        })


        let brand = [
            {
                id:1,
                name:'宝马 X6',
                price:500000
            },
            {
                id:2,
                name:'奥迪 A8',
                price:800000
            },
            {
                id:3,
                name:'奔驰',
                price:1000000
            }
        ]


        const div  = <div className="container">
                        {/*数组直接以字符串的形式显示*/}
                        {arr}
                        <hr />
                        {arr1}
                        <hr />
                        {arr2}
                        <hr />
                        {arr3}
                        <hr />
                        {arr.map((item,index)=><h3 key={index}>{item}</h3>)}
                        <hr />
                        {brand.map(item=>(
                            <p key={item.id}>{item.name}====={item.price}</p>
                        ))}
                    </div>
                        

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

总结上午知识点:
1.React 
	React是react.js的核心
	React.createElement(标签名,属性集合,内容)
2.ReactDOM
	ReactDOM是raect-dom.js的核心
	ReactDOM.render(标签对象,真实的dom节点)
3.jsx模板语法
	引入babel.js
	{},解析js变量
	{str.toUperCase()} //系统方法
	{fn()} //自发定义方法必须要有返回值
	条件渲染:只能使用三元运算,if结构不可以
	列表渲染:forEach  map(推荐)
	关键字:  className htmlFor
	注释:  {/*这里写注释内容*/}
	style行内样式: style={{写样式内容}}
  • 富文本
    • dangerouslySetInnerHTML={{__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>Document</title>
    <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
     <style>
         .container{
             background: aqua;
             color: black;
         }
     </style>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        const con = `<div>
                        <h1>一级标题</h1>
                        <img src="./img/shafa.jpg" alt="沙发" />
                    </div>`;
        console.log(con);
        const div  = <div className="container">
                       <div dangerouslySetInnerHTML={{__html:con}}></div>
                    </div>
                        

         ReactDOM.render(div,document.querySelector('#app'));           
    </script>
</body>
</html>

六.组件

  • 函数定义组件
* 函数组件:
* 1.函数组件名首字母必须大写
* 2.函数组件中必须要有返回值 即return
* 3.返回值中有且只能有一个根节点

父组件向子组件传值

父组件: 以自定义属性的形式将数据传递给子组件
子组件: 以参数的形式进行接收父组件传递的数据

<!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>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
            /**
             * 函数组件:
             * 1.函数组件名首字母必须大写
             * 2.函数组件中必须要有返回值 即return
             * 3.返回值中有且只能有一个根节点
            */
            function Header(){
                return <div className="well">
                            <h2>二级标题</h2>
                            <p>新闻首页</p>
                        </div>
            }
            function Footer(){
                return <div className="well">
                        <p>底部导航</p>
                    </div>
            }

        const div = <div className="alert alert-info">
                        <h1>父组件</h1>
                        <Header></Header>
                        <hr />
                        <Footer />
                    </div>
        //  console.log(div);    
        
        ReactDOM.render(div,document.querySelector('#app'));
        
    </script>
</body>
</html>
  • 类定义组件
 * 类组件
 * 1.类组件名称首字母必须大写
 * 2.类组件都继承自React.Component 基类
 * 3.类组件有一个系统自动注入的方法 render方法  (目的:渲染jsx模板)
 * 4.render方法中必须要有return
 * 5.render方法中返回结果只能有一个根节点

父组件向子组件传值

父组件: 以自定义属性的形式向子组件传值
子组件: 以this.props接收父组件传递的数据

<!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>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <!-- 
        1.引入react.js文件
        2.引入react-dom.js文件
        3.引入babel文件
     -->
     <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>
     <script src="./libs/babel.min.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="app"></div>
    <script type="text/babel">
        // 声明一个类组件
        /**
         * 类组件
         * 1.类组件名称首字母必须大写
         * 2.类组件都继承自React.Component 基类
         * 3.类组件有一个系统自动注入的方法 render方法  (目的:渲染jsx模板)
         * 4.render方法中必须要有return
         * 5.render方法中返回结果只能有一个根节点
        */
        class PageTitle extends React.Component{
            render(){
                console.log(this.props);
                return <div className="well">
                            <h2>{this.props.msg}</h2>
                        </div>
            }
        }

        let msg = '子组件';
        const div = <div className="alert alert-info">
                        <h2>父组件</h2>
                        <PageTitle msg={msg}></PageTitle>
                    </div>   
        
        ReactDOM.render(div,document.querySelector('#app'));
        
    </script>
</body>
</html>

七.脚手架

npm i create-react-app -g  全局安装脚手架
create-react-app -V  查看安装版本

1.创建项目

create-react-app 项目名称
cd 项目名称    #进入项目目录
npm start    #开启项目
	如果报错,需要执行以下命令:
    	git add .   #添加在暂存区
        git commit -m '说明'  #添加到本地仓库
        npm run eject   #将项目内容全部导出
        npm start    #启动项目
项目启动成功: http://localhost:3000

2.项目目录介绍

-config   #项目配置文件
--public	#存放静态资源文件及唯一一个页面index.html
--src	#你的代码
	pages
    store
    utils
	App.jsx   项目根组件
    index.js	项目的唯一入口文件

3.项目目录清空

src
	App.jsx 
		import React from 'react'

        export default function App() {
          return (
            <div>
              React
            </div>
          )
        }

	index.js
		import React from 'react';
        import ReactDOM from 'react-dom';
        import App from './App.jsx';

        ReactDOM.render(
            <App />,
            document.getElementById('root')
        );



插件: ES7 react/dedux

Case.jsx

import React, { Component } from 'react'

export default class Case extends Component {
    render() {
        return (
            <div>
                <h1>一级标题</h1>
            </div>
        )
    }
}

八.事件处理

1.事件注册

  • 事件名称: on+首字母大写的事件名={自定义的事件函数名}
  • 自定义事件函数名调用时,后面不能加(), 如果写了就会自动被触发
import React, { Component } from 'react'

export default class EventOn extends Component {
    hander(){
        console.log('我被触发了');
    }
    //render 方法时系统自动注入的方法
    // 作用:将jsx模板渲染到视图中
    render() {
        return (
            <div className="alert alert-info">
                <h1>事件注册</h1>
                {/* 
                    事件注册:
                    1.事件名称:  on+首字母大写的事件名={自定义的事件函数名}
                */}
                <button className="btn btn-success" onClick={this.hander}>点击</button>
            </div>
        )
    }
}

2.事件传参

 事件传参:
 1.将调用的自定义事件函数放入一个方法体中.
 2.同时需要通过bind函数改变this指向

import React, { Component } from 'react'

export default class EventOn extends Component {
    hander1(name){
        console.log(name);
    }
    //render 方法时系统自动注入的方法
    // 作用:将jsx模板渲染到视图中
    render() {
        return (
            <div className="alert alert-info">
                <h1>事件注册</h1>
               
                {/* 若需要传参,则需要在自定义事件名后面增加(), */}
                {/* 
                    事件传参:
                    1.将调用的自定义事件函数放入一个方法体中.
                    2.同时需要通过bind函数改变this指向
                */}
                <button className="btn btn-info" onClick={function(){this.hander1('刘劲')}.bind(this)}>传参按钮</button>

            </div>
        )
    }
}

3.通过箭头函数实现事件传参

<button className="btn btn-primary" onClick={()=>this.hander1('陶甜也')}>传参按钮1</button>

九.事件对象(event)

import React, { Component } from 'react'

export default class EventOn extends Component {
    hander2(e,name){
        console.log(e);
        console.log(name);
    }
    //render 方法时系统自动注入的方法
    // 作用:将jsx模板渲染到视图中
    render() {
        return (
            <div className="alert alert-info">
                <h1>事件注册</h1>
                {/* 获取事件对象 */}
                {/* 
                    获取事件对象
                    1.通过箭头函数传递e,对接到自定义事件函数接收e,
                */}
                <button className="btn btn-success" onClick={(e)=>this.hander2('唐达',e)}>事件对象按钮</button>
            </div>
        )
    }
}

十.组件状态数据的定义和更新

import React, { Component } from 'react'

export default class Login extends Component {
    name = '刘劲'
    constructor(){
        super()
        // state中存放就是状态数据
        this.state = {
            userName:'唐达',
        }
    }
    change(name){
        // 采用以下方式只是将state状态的数据发生改变.但是并未渲染到页面中.
        // this.state.userName = name;
        // console.log(this.state);


        /**
         * setState是一个异步函数,只修改state状态中的数据
         * 如果需要得到修改后的数据,则需要在第二个参数中来获取.
         * 
         */
        this.setState({userName:name},()=>{
            console.log(this.state);
        })
        // console.log(this.state);
    }
    render() {
        // console.log(this.state);
        const {userName} = this.state;
        return (
            <div>
                <div>{this.name}</div>
                <h3>{this.state.userName}</h3>
                {/* 简化形式 */}
                <h2>{userName}</h2>
                <button className="btn btn-success" onClick={()=>this.change('卢升')}>修改</button>
            </div>
        )
    }
}

十一.品牌管理案例

import React, { Component } from 'react'

export default class Brand extends Component {
    constructor(){
        super()
        this.state = {
            brandList : [
                {
                    id:2,
                    name:'宝马',
                    time:new Date()
                },
                {
                    id:1,
                    name:'奥迪',
                    time:new Date()
                },
            ],
            current:{},//修改
        }
    }
    // 品牌提交
    submit(e){
        if(e.keyCode === 13){
            let name = e.target.value;
            if(name === ''){
                alert('请输入品牌名称');
                return
            }
            if(this.state.current.id){
                 // 修改品牌
                 this.update(this.state.current,name)
            }else{
                this.add(name)
            }
            // 将输入框中value值清空
            e.target.value = '';
        }
    }
    // 添加品牌
    add(name){
        const {brandList} = this.state;
        let id = brandList.length > 0 ? brandList[0].id+1 : 1;
        let time = new Date();
        let params = {
            id,
            name,
            time
        }
        brandList.unshift(params);
        // console.log(brandList);
        this.setState({brandList})
    }
    // 获取要修改的品牌
    edit(row){
        // 将品牌名称显示在输入框
        document.querySelector('input').value = row.name;
        // 将内容存入搭配current中
        this.setState({current:row})
    }
    // 修改品牌
    update(row,name){
        const {brandList} = this.state;
        const newList = brandList.map(item=>{
            if(item.id ===  row.id){
                return {
                    ...item,
                    name:name
                }
            }else{
                return item
            }
        })
        // console.log(newList);
        this.setState({brandList:newList});
        // 将current值清空
        this.setState({current:{}});
    }
    // 删除
    del(index){
        this.state.brandList.splice(index,1);
        // console.log(this.state.brandList);
        this.setState({brandList:this.state.brandList})
    }
    render() {
        const {brandList} = this.state
        return (
            <div className="container">
                <h1>品牌管理案例</h1>
                <div className="well">
                    <input className="form-control" type="text" placeholder="请输入品牌名称" onKeyUp={(e)=>this.submit(e)}/>
                </div>
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>品牌名称</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {brandList.length > 0 ? brandList.map((item,index)=>(
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.name}</td>
                                <td>{item.time.toLocaleString()}</td>
                                <td>
                                    <button className="btn btn-primary" onClick={()=>this.edit(item)}>编辑</button>
                                    <button className="btn btn-danger" onClick={()=>this.del(index)}>删除</button>
                                </td>
                            </tr>
                        )) : <tr>
                                <td colSpan="4">暂无数据</td>
                            </tr>}
                        
                    </tbody>
                </table>
                
            </div>
        )
    }
}
琴～～
关注
react-react项目基于BFDUI脚手架以及BFDUI组件开发
08-15
每个React组件都有自己的状态和属性，通过JSX语法（JavaScript与HTML的结合）定义其输出。React利用虚拟DOM（即内存中的DOM树）来提高性能，只更新实际需要改变的部分，而非整个页面。 接下来，我们关注BFD-UI...
React 19 最新版本升级官方指南：破坏性更改
前端下午茶
04-30 373
React 团队爆料最新主版本升级 React 19 Beta（公测版）已经正式上线 npm，想要提前体验最新版本的 React 发烧友可以参考这份 React 官方博客的升级指南。 React 19 中新增的改进需要某些破坏性更改，但预计这些变更不会影响大多数应用程序。 在这篇 React 官方博客中，我们将科普将库升级到 React 19 beta（公测版）相关的破坏性更改。R...
react初步认识，核心库下载，jsx简介
m0_59129742的博客
03-17 2276
1. 英文官网： https：// reactjs.org/ 2.中文官网：https://react.docschina.org/ 3.react的特点： 1）声明式编码。 2）组件化编码。 3）React Native 编写原生应用。 4）高效（优秀的diffing算法。 4.react高效的原因 1）使用虚拟DOM，不总是直接操作页面真是dom。 2）DOM Diffing算法，最小化页面...
Reac19 升级指南
flytam的博客
05-04 1134
Reactv19 已经发布 beta 版本，想要快速体验如何升级到 v19 版本尝鲜的朋友们可以查阅进行了解
react学习--jsx
gercke的博客
12-09 115
准备工作 1.保证电脑上有node.js和npm 2.下载yarn，通过npm install -g yarn 下载好之后查看yarn -v 搭建react开发环境 必须安装node.js稳定版本,Node> = 6和npm> = 5.2 创建项目（可创建多次） 找到项目要创建的目录位置 eg E:/react npx create-react-app my-ap...
react-SVGR将SVG转换为React组件
08-14
`react-SVGR`是一个强大的转换工具，它可以将SVG格式的图像自动转换为符合React语法的组件。这个工具不仅简化了SVG的导入过程，还使得SVG图标可以与其他React组件一样进行组合和复用。在项目中集成`react-SVGR`，...
基于react的后台管理项目模板
02-21
3. 虚拟DOM：React通过虚拟DOM技术提高了性能，当组件的状态变化时，React会计算出最小的DOM更新操作，而不是直接修改真实DOM，从而减少了页面重绘和回流。 二、后台管理项目模板结构 1. 路由配置：项目通常使用...
基于typescript和JavaScript的react项目模板
02-23
在React项目中，Webpack通常配合Babel使用，Babel将ES6+和JSX语法转换为浏览器支持的ES5语法。 **五、开发工具和脚本** 项目模板通常会包含一些预设的npm脚本，如`start`（启动开发服务器）、`build`（打包生产环境...
React脚手架，用于快速搭建React项目
最新发布
06-04
React脚手架如Create React App（CRA）是开发者社区广泛推荐的初始化工具，它自动化了许多常见的配置和任务，如编译ES6/7语法、处理CSS预处理器、提供热模块替换等。通过使用CRA，开发者可以避免繁琐的配置工作，...
React JSX
12-14
React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。 我们先看下以下代码： const element = Hello, world! ; 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。 它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中
jsx 中文API文档
03-21
jsx 中文API文档
react 转换JSX语法的插件brower.js
09-04
如果是要直接在HTML上编辑，需要下载react.js与react-dom.js。如果要使用JSX语法，则需要使用转换JSX语法的插件。这里使用brower.js brower,js：将使用的JSX语法转换成JavaScript语法
ps文件瘦身脚本.jsx
11-14
ps文件瘦身脚本，减少PS运行内存，减少卡顿。
photoshop 改变尺寸.jsx
07-27
photoshop 改变尺寸.jsx photoshop脚本
React 从零开始学习（二）—— JSX
且听风吟的博客
07-12 1451
React 从零开始学习（二）—— 新建页面
欢迎探索Aqua：一个全栈网站与用户系统启动器
gitblog_00100的博客
05-13 282
欢迎探索Aqua：一个全栈网站与用户系统启动器 aqua:bulb: A website and user system starter项目地址:https://gitcode.com/gh_mirrors/aq/aqua 项目简介 Aqua是一个功能齐全的网站和用户系统启动模板，旨在帮助开发者快速搭建包含基础网页、联系表单、账户注册及登录等功能的Web应用。此项目不再维护，但其分支hapi-1...
vscode下react+jsx
pzmyg的博客
12-25 1123
准备工作： 1、安装visual studio code集成工具 2、这里使用create-react-app命令创建新工程，npm install -g create-react-app安装create-react-app，create-react-app my-app初始化工程 记录： 1、渲染失效 在html中引用独立的js文件时，自定义模块始终无法成功渲染至页面，将js中代码直接写进htm...
React组件内部通信：数据展示与事件处理
总结来说，React组件内部的数据传递主要是通过state来实现数据的展示和更新，而事件处理则用来捕捉用户交互并更新状态。尽管React没有提供像Angular那样的双向数据绑定，但通过巧妙的事件处理和状态管理，开发者可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值