react笔记

最新推荐文章于 2023-12-04 14:42:28 发布
最新推荐文章于 2023-12-04 14:42:28 发布
阅读量73 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Libra99WU/article/details/116210924
版权

react学习笔记

文章目录

前言

react 主要有 react核心库 react-dom库 和babel库 propTypes库。15.5之后 
<!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="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

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

一、jsx

Babel

  • es6转es5
  • jsx转js Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

关于虚拟DOM：

  • 本质是Object类型的对象（一般对象）
  • 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
  • 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

jsx语法规则：

  • 定义虚拟DOM时候不要写引号；
  • 标签中混入JS表达式时要用{}。
  • 样式的类名指定不要用class，要用className。
  • 内联样式，要用style={{key:value}}的形式去写。只有一个根标签。
  • 标签必须闭合,尤其是单标签（）。
  • 可以通过使用引号，来将属性值指定为字符串字面量，也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
  • 标签首字母
    1. 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    2. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

二、 react基本

1.函数组件和class组件

代码如下（示例）：

function Welcome(props){
	return <div>欢迎光临</div> 
}
/* 
执行了ReactDOM.render(<Welcome/>.......之后，发生了什么？
	1.React解析组件标签，找到了Welcome组件。
	2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/

class Welcome extents React.Component{
	render(){
		//render是放在哪里的？—— Welcome 的原型对象上，供实例使用。
		//render中的this是谁？—— Welcome 的实例对象 <=> Welcome 组件实例对象。
		console.log('render中的this:',this);
		return <div>欢迎光临</div>
	} 
}
/* 
执行了ReactDOM.render(<Welcome/>.......之后，发生了什么？
	1.React解析组件标签，找到了Welcome组件。
	2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
	3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/

知识点：

  • 组件名大写
  • 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

2.state

代码如下（示例）：

class Weather extends React.Component{
	//初始化状态
	state = {isHot:false,wind:'微风'}
	
	//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
	render(){
		const {isHot,wind} = this.state
		return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
	}

	//自定义方法————要用赋值语句的形式+箭头函数 解决this指向问题
	changeWeather = ()=>{
		const isHot = this.state.isHot
		this.setState({isHot:!isHot})
	}
}
/*
	严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换
*/

注意

  • state 为局部的或是封装的
  • 不要直接修改 State,而是应该使用 setState():
  • State 的更新可能是异步的
// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

3.props

函数组件的props

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>props</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建组件
		function Person (props){
			const {name,age,sex} = props
			return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
					</ul>
				)
		}
		Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
</body>
</html>

类式组件的props

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建组件
		class Person extends React.Component{

			constructor(props){
				//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
				// console.log(props);
				super(props)
				console.log('constructor',this.props);
			}

			//对标签属性进行类型、必要性的限制
			static propTypes = {
				name:PropTypes.string.isRequired, //限制name必传，且为字符串
				sex:PropTypes.string,//限制sex为字符串
				age:PropTypes.number,//限制age为数值
			}

			//指定默认标签属性值
			static defaultProps = {
				sex:'男',//sex默认值为男
				age:18 //age默认值为18
			}
			
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age+1}</li>
					</ul>
				)
			}
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
</body>
</html>

注意

4.ref

字符形式的ref

class Demo extends React.Component{
	//展示左侧输入框的数据
	showData = ()=>{
		const {input1} = this.refs
		alert(input1.value)
	}
	//展示右侧输入框的数据
	showData2 = ()=>{
		const {input2} = this.refs
		alert(input2.value)
	}
	render(){
		return(
			<div>
				<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
				<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
			</div>
		)
	}
}

## 回调函数形式的ref

class Demo extends React.Component{
	//展示左侧输入框的数据
	showData = ()=>{
		const {input1} = this
		alert(input1.value)
	}
	//展示右侧输入框的数据
	showData2 = ()=>{
		const {input2} = this
		alert(input2.value)
	}
	render(){
		return(
			<div>
				<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
				<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
			</div>
		)
	}
}

## createRef

class Demo extends React.Component{
	/* 
	React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
 	*/
	myRef = React.createRef()
	myRef2 = React.createRef()
	//展示左侧输入框的数据
	showData = ()=>{
		alert(this.myRef.current.value);
	}
	//展示右侧输入框的数据
	showData2 = ()=>{
		alert(this.myRef2.current.value);
	}
	render(){
		return(
			<div>
				<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
				<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
			</div>
		)
	}
}

注意

字符串ref 效率问题不建议使用

回调ref 绑定传入this 内联函数更新时候会调用2次 使用class绑定函数可以避免 但是无关紧要

creatRef Api 创建一个容器存储ref 一个标签得创一次 但是官方最推荐

4.事件处理

代码如下（示例）：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

注意

5.条件渲染

  • if 或者条件运算符

代码如下（示例）：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);
  • 元素变量

代码如下（示例）：

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);
  • 与运算符 && ：通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。

代码如下（示例）：

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);
  • 三目运算符

代码如下（示例）：

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}
  • 阻止组件渲染

代码如下（示例）：

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

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

注意

6.列表 & Key

  • 渲染多个组件 使用map,需要指定key值，数据会变动的数组最好不要使用key值

代码如下（示例）：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  )

注意

总结

遇到的问题及解决办法

ohlulu小企鹅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React笔记
02-24
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm ...
react 笔记
GA_118的博客
06-16 72
【代码】react 笔记。
React 笔记
qq_45465689的博客
04-28 109
React 笔记
React 笔记 jsx
海胆的博客
12-04 1074
html 内置标签通过is属性 标记为 自定义组件通过定义 组件函数的参数来设定 props。
React 学习笔记
weixin_41184962的博客
04-25 4301
1. react- 用于构建用户界面的javaScript 库react 是一个将数据渲染微HTML视图的开源 JavaScript库2. facebook开发，且开源3. 原生JavaScript 原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。 使用javascript直接操作DOM,浏览器会进行大量的重绘重排。 原生JavaScript没有组件化编码方案，代码复用率低。4. react 特点 react 核心库和re
react笔记整理
qq_44417271的博客
03-17 2048
React 一、React的简介 1、介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它 2、特点 1）.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 2）. 灵活
react笔记2
weixin_47282274的博客
06-27 349
react 笔记
React学习笔记
EUEY的博客
03-26 1771
React学习笔记（持续更新） 一、基础 1.概念 React是用于构建用户界面的JavaScript库（只关注视） 2.特点 声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。 3.高效原因 使用虚拟(virtual)DOM,不总是直接操作页面真
react 笔记汇总系列
一头向往远方的驴
08-09 1586
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I...
react笔记（入门专用）
07-17
react新手入门笔记
react 学习笔记
11-16
react 学习笔记， 自己学习过程中记录的内容。react component 生命周期，整合eslint插件
React Notes React笔记
11-12
React 笔记，涉及react router, mobx, create react app等
王博外文文献.pdf
最新发布
05-23
王博外文文献.pdf
基于 Go+Echo 开发的多房间实时通讯系统。.zip
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
尚硅谷react笔记
08-18
请提供与"尚硅谷react笔记"相关的引用内容或提供更具体的问题，我将尽力帮助您。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [【尚硅谷React】——...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值