React16入门到入土

搭建环境

默认你已经安装好 node.js

安装 react 脚手架

学习的过程中,我们采用React官方出的脚手架工具 create-react-app

npm install -g create-react-app

如果提示没有权限,win 用户可以管理员打开终端,mac 用户 可以在前面加上 sudo

新建第一个项目

在指定文件下

create-react-app study-demo 

运行

cd study-demo
npm start

脚手架生成的项目目录介绍

  • README.md :这个文件主要作用就是对项目的说明。
  • package.json: 这个文件是webpack配置和项目包管理文件。
  • package-lock.json:这个文件用一句话来解释,就是锁定安装时的版本号,并且需要上传到git,以保证其他人再npm install 时大家的依赖能保证一致。
  • gitignore : 这个是git的选择性上传的配置文件。
  • node_modules :这个文件夹就是我们项目的依赖包。
  • public :公共文件,里边有公用模板和图标等一些东西。
  • src : 主要代码编写文件
    • index.js : 这个就是项目的入口文件
    • index.css :这个是index.js里的CSS文件
    • app.js : 这个文件相当于一个方法模块,也是一个简单的模块化编程
    • serviceWorker.js: 这个是用于写移动端开发的,PWA必须用到这个文件,有了这个文件,就相当于有了离线浏览的功能

组件的基础编写

修改App.js 文件

import React, {Component} from 'react'class App extends Component{render(){return (<div className="content">Hello React</div>)}
}
export default App;

这里的 class 是面向对象语言的用法

className 是React 为了区别于 class 的特殊处理

React中JSX语法基础

JSX 就是 Javascript和XML结合的一种格式。

React发明了JSX,可以方便的利用HTML语法来创建虚拟DOM

当遇到<,JSX就当作HTML解析

遇到{就当JavaScript解析

比如我们写一段JSX语法

<ul className="my-list"><li>Hello React</li><li>I love React</li>
</ul>

相当于

var child1 = React.createElement('li', null, 'Hello React');
var child2 = React.createElement('li', null, 'I love React');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

组件和普通JSX语法区别

自定义的组件必须首写字母要进行大写,而JSX是小写字母开头

JSX中使用三元运算符

<ul className="my-list"><li>Hellow {false?'React':'Word'}</li><li>I love React</li>
</ul>

JSX中使用循环

jsx 可以自动展开数组

<ul>{this.state.list.map((item,index)=>{return <li>{item}</li>})}
</ul> 

Fragment 标签

因为组件只能有一个根目录

空标签,不会在页面留下痕迹

相当于 vue的 template , 小程序的 block

响应式设计和数据绑定

React 不建议你直接操作 DOM 元素,而是要通过数据进行驱动,改变界面中的效果

数据定义在组件中的构造函数里constructor

constructor(props){super(props) //调用父类的构造函数,固定写法this.state={inputValue:'' , // input中的值list:[]    //列表}
}

绑定数据

<input value={this.state.inputValue} /> 

绑定事件

render()方法的下面建立一个inputChange()方法

inputChange(e){console.log(e.target.value);this.setState({inputValue:e.target.value})
}

将事件绑定

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

​ 1. 必须要用 bind 设置一下指向(ES6的语法)

​ 2. 改变值需要使用 this.setState 方法

点击事件

<div><input value={this.state.inputValue} onChange={this.inputChange.bind(this)} /><button onClick={addList}> 增加 </button>
</div>
addList(){this.setState({list:[...this.state.list,this.state.inputValue]})}

注意点:

1. JSX 的点击事件写法是 onClick
1. React是禁止直接操作 state 的, 比如push,splice 都是不建议使用

JSX 代码注释

<Fragment>{/* 第一种写法写法 */}{// 第二种写法,此写法只能单独写一行}
</ Fragment>

JSX 解析HTML

可以使用 dangerouslySetInnerHTML 属性解决

<div dangerouslySetInnerHTML={{__html: this.state.htmlValue}}>

组件

父组件向子组件传值

父组件

import React,{Component,Fragment } from 'react'
import Item from './Item'class Test extends Component{constructor(props){super(props)this.state={list:[1, 2] }}render() {return (<Pragment><ul>{this.state.list.map((item,index)=>{return (<Item key={index} content={item} />)})}</ul>  </ Pragment>)}
}export default Test

子组件

import React, { Component } from 'react'; 
class Item extends Component { render() { return ( <div>{this.props.content}</div>);}
}
export default Item;

子组件向父组件传递数据

React有明确规定,子组件不能操作父组件里的数据,所以需要借助一个父组件的方法,来修改父组件的内容

import React,{Component,Fragment } from 'react'
import Item from './Item'class Test extends Component{constructor(props){super(props)this.handleClick=this.handleClick.bind(this)this.state={list:[1, 2] }}handleClick(key){const arr = this.state.list.filter(item => item !==key)this.setState({list: arr})}render() {return (<Pragment><ul>{this.state.list.map((item,index)=>{return (<Item key={index} content={item} handleDel={handleClick} />)})}</ul>  </ Pragment>)}
}export default Test

子组件

import React, { Component } from 'react'; 
class Item extends Component { handleClick(key){this.props.handleDel(key)}render() { return ( <div onClick={()=> handleClick(this.props.content).bind(this)}>{this.props.content}</div>);}
}
export default Item;

prop-types 校验传递的值

在vue中,我们 props: {xxx: { type: xxx, isRequire: true, default: xxx }} 可以校验传递的值

在 react 中 我们可以用 prop-types

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'class Item extends Component { handleClick(key){this.props.handleDel(key)}render() { return ( <div onClick={()=> handleClick(this.props.content).bind(this)}>{this.props.content}</div>);}
}Item.PropTypes = {content: PropTypes.string,handleDel: PropTypes.func
}export default Item;

isRequired关键字了,它表示必须进行传递,如果不传递就报错

Item.PropTypes = {content: PropTypes.string.isRequired,handleDel: PropTypes.func.isRequired
}

设置默认值

Item.defaultProps = {content: '默认的值'
}

Ref 的使用

跟vue一样,定义了ref,就能拿到该元素的大部分信息

定义

<input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}ref={(inputRef)=>{this.inputRef=inputRef}}
/>

使用

inputChange(){this.setState({inputValue:this.inputRef.value})
}

React 生命周期

React生命周期分为四个大阶段

Initialization:初始化

Mounting:挂载

Updation:更新

Unmounting:销毁

注意点:

​ constructor 不是生命周期函数,虽然它和生命周期函数的性质一样

Initialization

​ 定义属性(props)和状态(state)

Mounting

  1. componentWillMount : 在组件即将被挂载到页面的时刻执行。
  2. render : 页面state或props发生变化时执行。
  3. componentDidMount : 组件挂载完成时被执行。

注意点:

componentWillMountcomponentDidMount 这两个生命周期函数,只在页面刷新时执行一次,而render函数是只要有state和props变化就会执行

Updation

  1. shouldComponentUpdate 函数会在组件更新之前,自动被执行。它要求返回一个布尔类型的结果,必须有返回值,常用于组件性能优化。
  2. componentWillUpdate 在组件更新之前,但 shouldComponenUpdate 之后被执行。
  3. componentDidUpdate 在组件更新之后执行,它是组件更新的最后一个环节
  4. componentWillReceiveProps 子组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行

注意点:

​ 如果shouldComponentUpdate 返回false,后面的函数就不会被执行了。

componentWillReceiveProps 组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行

Unmounting

componentWillUnmount 函数时组件从页面中删除的时候执行

利用shouldComponentUpdate 优化组件

在上面的代码中,我们输入框频繁输入,会导致子组件频繁刷新,导致性能损耗

shouldComponentUpdate 函数就可以简单的解决调这个问题

shouldComponentUpdate(nextProps,nextState){if(nextProps.content !== this.props.content){return true}else{return false}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74097.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

滑动窗口的最大值(双端队列,单调队列)

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 class Solution {public int[] maxSlidingWindow(int[] nums, int k) {LinkedList<Integer> deque new LinkedList<>();//双端队列&#xff0c;存储单调队列的下标int ans[] new int[nu…

公开游戏、基于有向图的游戏

目录 〇&#xff0c;背景 一&#xff0c;公开游戏、策梅洛定理 1&#xff0c;公开游戏 2&#xff0c;策梅洛定理 二&#xff0c;有向图游戏 1&#xff0c;狭义有向图游戏 2&#xff0c;广义有向图游戏 3&#xff0c;狭义有向图游戏的SG数 4&#xff0c;Bash Game 力扣…

LVGL Animations(动画)的简单使用

一、前言 哈喽&#xff0c;大家好。在进行界面设计的时候&#xff0c;动画的使用是必不可少的&#xff0c;今天这篇文章就跟大家分享一下 LVGL Animations&#xff08;动画&#xff09;的简单使用。笔者将在模拟器上运行演示&#xff0c;LVGL 版本号为 8.3.0。 二、Animation…

【实践篇】Redis最强Java客户端(一)之Redisson入门介绍

Redisson入门介绍 文章目录 Redisson入门介绍1.1 Redisson简介1.1.1 起源和历史1.1.2 优势和特点1.1.3 与其他Java Redis客户端的比较 1.2 使用和配置1.2.1 依赖和SDK1.2.2 配置文件解析1.2.3 连接池配置 1.3 优雅的让Hash的某个Field过期2. 参考资料3. 源码地址4. Redis从入门…

2023高教社杯数学建模E题思路分析 - 黄河水沙监测数据分析

# 1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…

JAVASE---抽象类和接口

抽象类 抽象类的概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。 抽象类语法 在…

反编译 SyntaxError: Unexpected token ‘}‘ 异常处理

反编译小程序出现异常&#xff1a; SyntaxError: Unexpected token ‘}’ 网上很多都说使用最新版本的反编译 wxappUnpacker-master 包可以进行解析&#xff0c;但是大神已经停止了更新wxappUnpacker-master 包&#xff1b; 查找了网上大部分的wxappUnpacker-master 包&#…

BBR 带宽估计的延后累加

一个关于时延统计分布的小测试&#xff0c;用 netem delay jitter distribution pareto 模拟&#xff0c;得到下面的结果&#xff1a; netem 的 jitter 并不是真 jitter&#xff0c;只是通过延时阻滞部分报文模拟 jitter&#xff0c;对保序流而言&#xff0c;就表现为乱序&am…

深度学习概念(术语):Fine-tuning、Knowledge Distillation, etc

文章目录 1.Fine-tuning (微调)2.Transfer Learning (迁移学习)3.Knowledge Distillation (知识蒸馏)4.Meta Learning (元学习) 这里的相关概念都是基于已有预训练模型&#xff0c;就是模型本身已经训练好&#xff0c;有一定泛化能力。需要“再加工”满足别的任务需求。 进入后…

strlen函数使用与模拟实现【进阶版】

strlen函数使用与模拟实现 1.strlen函数介绍 资源来源于cplusplus网站 翻译过来的大致意思就是&#xff1a; 获取字符串长度 2.strlen的使用 int main() { //strlen - 求字符串长度的 //字符串的结束标志是\0 //strlen统计的是\0之前出现的字符的个数 //基本功能 char arr[]…

华为数通方向HCIP-DataCom H12-821题库(单选题:321-340)

第321题 BGP的Open报文是用于建立对等体连接的,以下哪一项不属于Open报文中携带的参数信息? A、发送者的Router ID B、AS号 C、BGP版本号 D、TCP端口号 答案:D 解析:以下是BGP的Open报文: 第322题 在建立BGP对等体的过程中,OpenSent状态表明BGP等待的Open报文 并对收…

关于SpringBoot项目中读取不到自建email.yml配置文件内容的问题

如果你的Spring Boot项目中可以读取application.yml中的内容&#xff0c;但无法读取email.yml中的内容&#xff0c;可能是由于Spring Boot默认只读取application.yml或application.properties文件作为主配置文件&#xff0c;而不会自动加载其他YAML文件。 要使Spring Boot能够…

NetSuite 客户销售团队更新方法辨析

在NetSuite中如果想将销售团队与客户数据进行隔离&#xff0c;采用的方法是“在客户上定义销售团队&#xff0c;同时将销售团队成员的访问角色进行Employee Restrictions”。 其中&#xff0c;Employee Restrictions的主题我们过去发过几篇&#xff0c;大家可以参考。 NetSui…

Spring Reactive:响应式编程与WebFlux的深度探索

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

OpenCV---视频操作

用摄像头捕获视频 import cv2 as cv import numpy cap cv.VideoCapture(0) while(cap.isOpened()):ret, frame cap.read() # read() 它返回两个值&#xff0c;第一个是布尔值&#xff0c;表示是否成功读取到一帧&#xff0c;第二个是帧本身。cv.imshow(Video, frame)if c…

C# 共享项目的应用

概述 共享项目也可以称为共享资产项目,它允许在多个目标项目之间共享的代码。 它支持编译器指令,可以有条件地包含特定于平台的代码,以便编译为引用共享项目的项目的子集。 还有 IDE 支持,可帮助管理编译器指令并直观显示代码在每个应用程序中的外观。 什么是共享项目? …

记一起小意外事件引起的批量重命名文件名

一、事件描述 某次,因某业务系统迁移,一线人员对业务目录误操作,执行打包命令过程中导致Tomcat下的web应用程序无法使用,检查后发现项目下所有文件名都加了gz格式;询问一线,发现是对项目目录执行了:gzip -r ./tomcat导致程序文件找不到;报错如下: 二、事件处理 1、查看…

c语言开篇---跟着视频学C语言

标识符 标识符必须声明定义&#xff0c;可以是变量、函数或其他实体。 Int是标识符吗&#xff1f; 不是&#xff0c;int是c语言关键词&#xff0c;不是随意命名的 C语言关键词如下&#xff1a; 常量 不需要被声明&#xff0c;不能赋值更改。 printf函数 printf是由print打印…

Thread线程的认识与了解

这是老式的使用方式&#xff0c;可以作为了解 一、Thread&#xff08;仅需了解&#xff09; 1、有了Task还需要学习Thread吗&#xff1f; 不必深入学习&#xff0c;但可以了解。 虽然Task和async/await是更现代和推荐的异步编程模型&#xff0c;但了解Thread类…

获取和设置小程序和h5的页面栈

获取页面栈&#xff1a; 语法&#xff1a; let pages getCurrentPages(); 设置页面栈&#xff1a; 小程序语法&#xff1a; pages.data H5语法&#xff1a; pages let pages getCurrentPages(); let page pages[pages.length - 2]; if(page.route "pages/conf…