React框架——入门知识点总结+示例（2）

最新推荐文章于 2023-10-16 21:36:04 发布
最新推荐文章于 2023-10-16 21:36:04 发布
阅读量212 收藏
点赞数
分类专栏： React框架知识点 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Whuiry/article/details/107777584
版权

05 事件书写

1.事件绑定和this指向

绑定事件：on+事件名字Click（首字母大写）/ onMouseEnter={this.函数名}

<body>
    <div id="app">
        
    </div>
    <script type="text/babel">
    //1.类定义组件
		class Child extends React.Component{
        constructor(){
            super()
        }
        change(){
            console.log(111);
            //4.事件是异步操作，执行事件的时候，this不指向类
            console.log(this); //undefined
        }
        render(){
        	console.log(this); //类里面的this，一般指向当前实例化的对象；这里可以理解为this指向的是使用类相关的参数（与类有关的对象）
            return <div>
                //3.使用事件
                <button onClick={this.change} onMouseEnter={this.change}>按钮</button>
            </div>
        }
    }
	//2.渲染标签
    ReactDOM.render(<Child/>,document.getElementById('app'));
	</script>
</body>
2.改变this指向

普通函数的this指向–>Window
构造函数的this指向–>实例化对象

call、apply、bind的作用是改变函数运行时this的指向：
参考文章：https://www.cnblogs.com/pssp/p/5215621.html

<body>
    <div id="app">
        
    </div>
    <script type="text/babel">
    //1.类定义组件
		class Child extends React.Component{
        constructor(){
            super()
        }
        //用箭头函数改变this指向
        change=()=>{
            console.log(this); 
        //Child {props: {…}, context: {…}, refs: {…}, updater: {…}, change: ƒ, …}
        }
        render(){
            return <div>
                //3.使用事件
                <button onClick={this.change} onMouseEnter={this.change}>按钮</button>
            </div>
        }
    }
	//2.渲染标签
    ReactDOM.render(<Child/>,document.getElementById('app'));
	</script>
</body>
3.给标签取 ref 值（输入值可获取里面的值）

ref是一个集合，存放取过名字的标签，通过this.refs.ref(名字).value/innerHTML值获取标签;

例：<input type=“text” ref=“txt”/ >

<body>
    <div id="app">
        
    </div>
    <script type="text/babel">
    //1.类定义组件
		class Child extends React.Component{
        constructor(){
            super()
        }
        //用箭头函数改变this指向
        change=()=>{
        //4.this.refs.txt.value/innerHTML
          console.log(this.refs.txt.value,this.refs.btn.innerHTML);
        }
        render(){
            return <div>
            //3.ref
             	<input type="text" ref="txt"/>
             	<button onClick={this.change} ref="btn"></button>
            </div>
        }
    }
	//2.渲染标签
    ReactDOM.render(<Child/>,document.getElementById('app'));
	</script>
</body>

06 state

1.使用原因：props参数的值不能修改
 class List extends React.Component{
        constructor(props) {
            super(props);
        }
        change=()=>{
            //props参数的值不能修改
            this.props.num=this.props.num+1
            }
        render(){
            return <div>
                <button onClick={this.change}>这是数据{this.props.num}</button> 
            </div>
        }
    }

    ReactDOM.render(<List num="1" />,document.getElementById('app'))
2.所以：使用state
class Div extends React.Component{
    constructor(props) {
        super(props);
        //this.state存放的是私有数据 可以直接修改
        this.state={
            msg:0
        }
    }

    render(){
        return <div>
            <h1>这是标题{this.props.num}{this.state.msg}</h1>
        </div>
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fOHnVMTz-1596477946876)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200804001304503.png)]

3.修改state的值（点击标题修改）
class Div extends React.Component{
    constructor(props) {
        super(props);
        //this.state存放的是私有数据 可以直接修改
        this.state={
            msg:0
        }
    }
    change=()=>{
        this.setState({
            msg:++this.state.msg
        })
    }
    render(){
        return <div>
            <h1 onClick={this.change}>这是标题{this.state.msg}</h1>
        </div>
    }
}
 ReactDOM.render(<Div/>,document.getElementById('app'));

随意点击次数，标题后面的数字会跟着变化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DJ65pKjM-1596476938043)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200804001708743.png)]

4.使用state里的数组
class Div extends React.Component{
    constructor() {
        super();
        //this.state存放的是私有数据
        this.state={
            msg:0,
            a:[1,2,3,4],
            //info数组
            info:[
                {
                    "msg":'昨天天气'
                },
                {
                    "msg":'昨天天气'
                },
                {
                    "msg":'昨天天气'
                },
                {
                    "msg":'昨天天气'
                }
            ]
        }
    }
    change=()=>{
        //修改数据
        this.setState({
            msg:++this.state.msg
        })
    }
    render(){
        return <div>
            <h1>这是标题{this.state.msg}{this.state.a}</h1>
            {
                //map循环
                this.state.info.map((item,index)=>{
                    return <p key={index}>{item.msg}</p>
                })
            }
        </div>
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ca7THKHT-1596476938049)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200804002833818.png)]
点击按钮，数组新增

class Div extends React.Component{
    constructor() {
        super();
        //this.state存放的是私有数据
        this.state={
            msg:0,
            a:[1,2,3,4],
            info:[
                {
                    "msg":'昨天天气'
                },
                {
                    "msg":'昨天天气'
                },
                {
                    "msg":'昨天天气'
                },
                {
                    "msg":'昨天天气'
                }
            ]
        }
    }
    change=()=>{
        //数组新增，直接调用方法
        this.state.info.unshift({msg:'新增的'})
        //普通数据修改
        this.setState({
            msg:++this.state.msg
        })
    }
    render(){
        return <div>
            <h1>这是标题{this.state.msg}{this.state.a}</h1>
            <button onClick={this.change}>按钮</button>
            {
                this.state.info.map((item,index)=>{
                    return <p key={index}>{item.msg}</p>
                })
            }
        </div>
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Cjt9q4L-1596476938068)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200804003608932.png)]

07事件传参

1.函数传参：this.事件名.bind(this,实参1,实参2)
<script type="text/babel">
        class Div extends React.Component{
        constructor() {
            super();
            //this.state存放的是私有数据
            this.state={
                msg:0,
                a:[1,2,3,4]
            }
        }
        change=()=>{
       
        }
        render(){
            return <div>
                <h1>这是标题</h1>
                {
                    this.state.a.map((item,index)=>{
                        //函数传参 this.事件名.bind(this,实参1,实参2)
                        return <p key={index} onClick={this.change.bind(this,index)}>{item}</p>
                    })
                }
            </div>
        }
    }

    ReactDOM.render(<Div/>,document.getElementById('app'));

</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-32JR8dXV-1596476938074)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200804010215675.png)]

2.声明方法(形参1,形参2,event)

最好有几个形参就有几个实参

<script type="text/babel">
        class Div extends React.Component{
        constructor() {
            super();
            //this.state存放的是私有数据
            this.state={
                msg:0,
                a:[1,2,3,4]
            }
        }
        change=(a,c,e,d)=>{
            //d没有对应的参数，这个时候d是undefined
       		console.log(e)
        }
        render(){
            return <div>
                <h1>这是标题</h1>
                {
                    this.state.a.map((item,index)=>{
                        //函数传参 this.事件名.bind(this,实参1,实参2)
                        //声明方法(形参1，形参2，event)
                        return <p key={index} onClick={this.change.bind(this,index,1)}>{item}</p>
                    })
                }
            </div>
        }
    }

    ReactDOM.render(<Div/>,document.getElementById('app'));

</script>
3.添加className
<style>
        .current{
            background-color: lightcoral;
        }
</style>

<script type="text/babel">
	class Div extends React.Component{
        constructor() {
            super();
            //this.state存放的是私有数据
            this.state={
                msg:0,
                a:[1,2,3,4]
            }
        }
        change=(a,e)=>{
            this.setState({
                msg:a
            })
        }
        render(){
            return <div>
                <h1>这是标题</h1>
                {
                    this.state.a.map((item,index)=>{
                    //函数传参 this.事件名.bind(this,实参1,实参2)
                    //声明方法 (形参1，形参2，event)
                    return <p key={index} onClick={this.change.bind(this,index)} className={index==this.state.msg?'current':''}>{item}</p>
                    })
                }
            </div>
        }
    }
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SYong1He-1596476938077)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200804012850280.png)]

再添加一个类

函数传参 this.事件名.bind(this,实参1,实参2)
声明方法 (形参1，形参2，event)

<style>
        .current{
            background-color: lightcoral;
        }
/*新添加的类*/
		.one{
            line-height: 60px;
            cursor: pointer;
        }
</style>

<script type="text/babel">
        class Div extends React.Component{
        constructor() {
            super();
            //this.state存放的是私有数据
            this.state={
                msg:0,
                a:[1,2,3,4]
            }
        }
        change=(a,e)=>{
            this.setState({
                msg:a
            })
        }
        render(){
            return <div>
                <h1>这是标题</h1>
                {
                    this.state.a.map((item,index)=>{
                        //有两个类 one一定有
                        return <p key={index} onClick={this.change.bind(this,index)} className={index==this.state.msg?'current one':'one'}>{item}</p>
                    })
                }
            </div>
        }
    }
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sGeVTwk0-1596476938082)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200804013201811.png)]

08 React包使用

太长了，下篇继续写

Whuiry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 框架
敲代码的小李同学的博客
07-02 3万+
React 框架学习
react pro——————————
04-14
react pro——————————
React框架的介绍、特点、安装及基本使用流程
qq_56715703的博客
04-21 9355
react是由facebook前端开发团队开发和维护的js框架react的实现功能类似VUE，但是由于国外的开发风格，导致在react上，并没有对数据渲染的步骤进行封装，需要开发者更多的使用es6的语法手动完成数据渲染，所以，代码难度比VUE高。
前端框架 React 学习总结
qq_50909707的博客
11-17 6653
（1）创建store仓库，reducers分开管理reducers: 数据开发中type字符串应放入一个常量管理default:}}default:}}count,user}//1、引入redux//引入日志//导入reducers//2、创建仓库//合并多个reducer})（2）导入到src/index.js文件,全局配置(3)组件中的使用return (
【React框架基础知识】React框架的简介与基本使用方法
得未曾有 心净踊跃
08-29 7196
React：由Facebook开发的用于构建用户界面的JavaScript库(开源)。
umi基础框架（React+umi+Ts）
08-05
umi、dva、React
react 入门实操示例
01-17
当谈及前端框架时，很多人第一反应便是 React、Angular、Vue.js 三剑客。不过当前，三剑客虽然还在，但是它们三个却往不同的方向前进。 React 用户粘性最强，有 57% 的受访者表示“用过这个技术，以后还会再用”，...
React入门——项目搭建
01-08
一款javascript前端框架，把用户界面抽象成一个个的组件，按需组合成页面，官网，与其他框架的共同点是，都采用虚拟dom，和数据驱动。 环境搭建 首先，我们需要安装node.js，直接搜索并在官网下载安装包。 node.js...
React 基础知识点总结
02-21
React 基础知识点总结
React框架概述
橘猫吃不胖的博客
03-02 2万+
React框架概述1 React简介1.1 React概述1.2 React开发环境搭建1.3 第一个React应用1.4 React虚拟DOM1.5 ReactDOM.render()方法1.6 React的渲染机制1.7 React优势1.8 React脚手架2 React JSX2.1 JSX介绍2.2 JSX的应用2.3 JSX算数表达式2.4 JSX条件表达式2.5 JSX嵌入表达式2.6 JSX对象表达式2.7 JSX函数表达式2.8 JSX数组表达式2.9 JSX样式表达式2.10 JSX注释
vue和react的区别
粥可温
09-07 3万+
如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js， 如果是大规模应用程序和移动应用程序的应该选择React。
一文带你了解React框架
热门推荐
官方推荐
04-30 5万+
前言 由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI ，就能同时运行在服务器、浏览器和手机。 React主要用于构建UI。你
react框架菜鸟教程，前端小白必看
weixin_61857435的博客
05-29 2950
React 是一个比较流行的前端开发框架。React是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
前端（七）——React框架的定位与应用场景解析
杜永康的博客
07-17 3073
组件化开发React 推崇以组件为基础的开发方式。组件是一个独立的、可重用的模块，用于构建用户界面的一部分。React组件具有自己的状态（state）和属性（props），并通过render()方法来描述组件应该如何渲染。组件可以嵌套、组合和复用，使得代码更加模块化、可维护和扩展。虚拟DOMReact 使用虚拟DOM进行高效的渲染。虚拟DOM 是一个轻量级的 JavaScript对象树，与真实的DOM对应。
React和Vue的区别
南栀的博客
03-28 7819
react与vue的区别
React框架的介绍
最新发布
qq_73992463的博客
10-16 655
React是一种流行的JavaScript库，被广泛用于构建用户界面。它是由Facebook开发并于2013年发布的，现在已经成为许多开发人员的首选框架之一。
React框架基础
weixin_58448088的博客
07-02 3688
网址：React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI组件时R
Vue 和 React 有什么不同？
fe_watermelon的博客
09-23 1万+
大家好，我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。本人 Vue2 和 React 都用过，但不熟悉 Vue3，没用它做过项目。其实我对这两大框架也没有认真钻研过它们的细节，也就是工作上用它们写一些简单业务，或偶尔看看相关的博客文章，但还是有一些浅显的认识的，写下来记录一下。Vue 和 React 都是用于构建 UI 界面的流行框架。它们的哲学也有很多相似的地方，我们可以认为这些特性是流行前端框架的一个趋势。。
前端分页插件_免费开源的React前端框架——ReactAdmin
05-26
ReactAdmin 是一个免费开源的 React 前端框架，用于快速构建管理后台应用程序。它提供了许多可重用的组件和工具，包括前端分页插件。 ReactAdmin 的前端分页插件是一个高度可定制的组件，可以与任何 API 集成，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值