react 笔记
01一、React 安装和目录结构
React官方中文文档 ： https://react.docschina.org/
1. 认识React
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
2. 快速构建 React 开发环境(脚手架)
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6
查看本机是否安装create-react-app
create-react-app -V
安 装 （目前使用create-react-app,要求必须是nodjs14以上的版本）
npx create-react-app my-app // my-app为项目名称
npx临时安装create-react-app,并使用该模块创建项目my-app,创建之后删除安装包
进入目录
cd my-app
启动项目
npm start
3. React脚手架的目录结构 （了解）
node_modules: 存放第三方下载的依赖的包
public:资源目录
favicon.ico: 网站缩略图
index.html: 项目首页模板
manifest.json : 如果是一个 app ，定义 app 的图标 网址 主题颜色等
robots.txt : 这个表示任何搜索引擎，抓取工具的用户代理都可以访问这个网站的所有页面资源
如果robots.txt的内容 是:
User-agent: *disallow: /mytest1disallow: /mytest2disallow: /mytest3这样，就可以确保这三个页面不被任何搜索引擎抓取
src : 项目的所有源代码
index.js: 整个程序的入口 (react 的理念 all in js)
index.css: 初始化样式
App.js: 根组件
App.test.js: 自动化测试文件
App.css: 项目的样式
logo.svg: 首页 logo
setupTests.js 针对index.js的测试
reportWebVitals.js Web Vitals是谷歌针对网页加载速度和体验所提出的一套指标，这套指标用于测试网页的加载速度及用户体验等等；谷歌基于这套指标不仅设计了多套测试工具，还针对各种指标提出了相应的优化方法
二、index.js入口文件
引入react
import React from 'react';
React包：用来编译JSX。 react的核心思想是虚拟DOM，react包含了生成虚拟DOM的函数react.createElement，及Component类。当我们自己封装组件时，就需要继承Component类，才能使用生命周期函数等。
引入react-dom
import ReactDOM from 'react-dom';
用来加载DOM。 核心功能就是把这些虚拟DOM渲染到文档中变成实际DOM
引入css文件
import './index.css';
引入组件
import App from './App';
渲染虚拟DOM到页面
ReactDOM.render(
,
document.getElementById('root')
);
<React.StrictMode> （了解）
StrictMode 是一个用以标记出应用中潜在问题的工具。就像 Fragment ，StrictMode 不会渲染任何真实的UI。它为其后代元素触发额外的检查和警告。
严格模式检查只在开发模式下运行，不会与生产模式冲突。
StrictMode目前有助于
1、识别具有不安全生命周期的组件
2、有关旧式字符串ref用法的警告
3、关于已弃用的findDOMNode用法的警告
4、检测意外的副作用
5、检测遗留 context API
6、将来的React版本将添加其他功能。
三、App.js
App.js 是根组件
引入图片资源
//import logo from './logo.svg';
import logo from './logo.jpg';
function App() {
return (
标题
);
}
export default App;
四、React组件
1. 函数组件
function Welcome(props) {
return
Hello, {props.name}
;}
该函数是一个有效的 React 组件
它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素（JSX）。
这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
2. class组件
还可以使用 ES6 的 class 来定义组件
react核心包中的Component是组件的父类，用来定义组件
render 方法必须要返回一个 JSX 元素
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
;}
}
上述两个组件在 React 里是等效的
3. 快速生成组件的插件
安装 VSCode插件：ES7 React... Snippets
生成函数式组件： rfc
生成class组件： rcc
html标签的自动补全功能
文件 --> 首选项 --> 设置 --> 用户 --> 扩展 --> Emmet --> Include Languages
添加：
键： javascript
值： javascriptreact
4. 使用组件注意事项
组件名要大写
return 只返回一行，不加（），如果多行，需要加()
组件中只有一个根元素
可以用Fragment做包裹元素，它不会被渲染为一个真实节点
组件要导出
5. 代码保存时格式混乱的解决方案
https://blog.csdn.net/impossible1994727/article/details/119806420
五、React的JSX语法
1. JSX 简介
const element = <h1>Hello, world!</h1>;
这个有趣的标签语法既不是字符串也不是 HTML
它被称为 JSX，是一个 JavaScript 的语法扩展。
JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。
在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象（虚拟DOM）。
2. JSX 语法
标签在js中直接写，不用做为字符串加"", js语法的部分要在{}中定义
<div>{3 > 7 ? 'a' : 'b'}</div>
class属性用className替代,
<h1 className="title">标题</h1>
label标签的for属性用htmlFor替代
用户名
jsx中不能用if语句，用三元运算来替代
{3 > 7 ?
111
:222
}{
3 < 7 ?
111
:
222
}
dangerouslySetInnerHTML属性
//直接渲染，不解析标签
{str}
// 解析标签
注释需要写在花括号中
菜鸟教程
{/*注释...*/}
,
JSX会自动解析数组，渲染数组中的每个元素值
const list = ['a','b']
...
list.map((item,index) => {
return
})
JSX添加style属性
{/* 错误写法 */}
{/*
style */}{/* 正确写法 */}
style02 数据绑定
数据如何在模板中显示： this.state.数据
数据如何改变 this.setState({})
class 组件名 extends Component {
constructor(){
super()
//state中的数据是响应式数据，数据改变，会触发视图重新渲染
this.state = {
inputValue: '',
list: []
}
}
//改变数据
changeData = ()=>{
console.log('调用函数')
// react数据要用this.setState来改变
this.setState({
inputValue: 'hello'
})
}
render(){
return (
<div>
显示数据：{this.state.inputValue}
单击按钮改变数据： <button onClick={this.changeData}>改变数据</button>
</div>
)
}
}
容易出错的地方
下面这种绑定，会在没有单击按钮时就调用方法，而onclick绑定的只是方法执行后的返回值
<button onClick={this.changeData()}>改变数据</button>
事件绑定传参
data-属性名携带参数
<button onClick={this.changeData} data-index={3}>改变数据</button>
changeData = (e)=>{
console.log(e.target.dataset.index);
console.log(this.state.msg);
}
事件绑定箭头函数，箭头函数内部调用事件处理程序
<button onClick={()=>this.changeData('值')}>改变数据</button>
changeData = (data)=>{
console.log(data);
}
setState的各种用法
没有回调
this.state = {
msg: 'apple'
}
changeData(){
原因：setState是异步操作
this.setState({
msg: 'lemon'
})
console.log(this.setState.msg) // apple
}
this.setState(对象形式，回调)
console.log('修改数据为lemon');
this.setState({
msg: 'lemon'
},()=>{
console.log(this.state.msg);
})
this.setState(回调1，回调2)
第一个回调中会传入prevState累加时，++要放前面
this.setState((prevState)=>{
// console.log(prevState.num);
return {
num: ++prevState.num
}
},()=>{
console.log('修改成功');
})
了解-ref获取原生dom
ref的值是一个回调函数，会自动注入当前元素的dom应用场景 ： 页面初始化时文本框获取焦点
import React, { Component } from 'react';
class App extends Component {
handlerChange(){
}
//生命周期函数，组件加载完毕时 (vue的mounted)
componentDidMount(){
this.input.focus()
}
render() {
return (
// ref={(input)=>{ this.input = input}}
/**
* ref的值是一个回调函数
* 函数注入的参数即为当前元素的dom对象
* this.input = input 把当前dom对象的地址存入实例的input属性中
*/
<input type="text" value="aaa" onChange={this.handlerChange} ref={(input)=>{ this.input = input}}></input>
);
}
}
export default App;
网友评论