react笔记
1 react 特性
2 虚拟dom
简而简之:创建js对象进行对比,最大程度减少dom的操作(创建js非常快,性能高)
3 脚手架 create-react-app 安装
- 全局方案
npm i -g create-react-app （安装脚手架） ####此处不要用yarn安装
create-react-app 项目名称 (安装项目)
- 临时创建方案
npx create-react-app 项目名称 //临时创建即用即走
4 项目起步配置（删除src下所有文件，重新建立index.js入口文件，会自动加到index.html中）
src 文件夹下 # 只建立一个index.js入口js文件即可(必须是index.js)
- index.js 文件内容大概
- react17之前的版本写法
import React from "react"; // 导入React
import ReactDOM from "react-dom"; // 导入模板解析器
ReactDOM.render(<div>1111</div>,document.getElementById("root")) // root（index.html入口文件的id）
- reaact18版本写法
import React from "react";
// 导入dom，组件，解析器(解析渲染到页面中)
import { createRoot } from "react-dom/client";
// 创建渲染dom的根节点
const root = createRoot(document.getElementById("root"));
// 渲染dom或者组件
root.render(<div>111</div>);
- index.html中加入一段代码解决报错（17和18版本都要加）
<script>
this.globalThis || (this.globalThis = this)
</script>
5 创建类组件(快速创建rcc)
react17之前的版本写法
- 类组件创建
src 目录下创建 compontents 文件夹 ==> 创建class类组件.js
import React from "react";
// 继承react的组件
class App extends React.Component{ # 必须继承React.Component // class App extends React.Component 创建App类组件
// 渲染函数
render(){
return <div>hello react 类组件</div>
}
}
// 导出 App类
export default App
- 入口js文件(index.js)导入类组件
import React from "react"; // 导入React
import App from '具体导出组件的文件'
import ReactDOM from "react-dom"; // 导入模板解析器
##### 此处react 自动将App类组件进行 new APP 实例化一系列操作
ReactDOM.render(<App><App/>,document.getElementById("root")) // 渲染App 组件 <App><App/>或者<App/>都可以
react18版本写法
- 类组件创建
src 目录下创建 compontents 文件夹 ==> 创建class类组件.js
import React from "react";
// 继承react的组件
class App extends React.Component{
// 渲染函数
render(){
return <div>hello react 类组件</div>
}
}
// 导出 App类
export default App
- 入口js文件(index.js)导入类组件
import React from "react";
import { createRoot } from "react-dom/client"; // 导入模板解析器
import App from './compontents/class类组件'
// 创建渲染根节点
const root = createRoot(document.getElementById("root"));
// 将类组件App渲染到根节点root中
root.render(<App/>);
6 react 提示插件安装
7 创建函数组件(react16.8之前是无状态组件,之后出现react hook 钩子)
- 函数组件创建
src 目录下创建 compontents 文件夹 ==> 创建function函数组件.js
function App(){
return (
<div>
hello 函数组件
<li>111</li>
<li>222</li>
</div>
)
}
export default App
- 入口js文件(index.js)导入函数组件
import React from "react";
import { createRoot } from "react-dom/client";
import App from './compontents/function函数组件.js'
// 创建渲染根节点
const root = createRoot(document.getElementById("root"));
// 将函数组件App渲染到根节点root中
root.render(<App/>);
8 函数组件与类组件的历史分水岭
// 16.8之前 函数组件又称为(无状态组件,不能操作事件等js逻辑)
// 16.8之后 react出现 hooks (可以操作状态)
9 组件的嵌套
- 定义组件
import React, { Component } from 'react'
// 定义 Navbar的子组件
class Title extends Component {
render() {
return (
<div>Navbar的子组件</div>
)
}
}
// 定义 Navbar 组件
class Navbar extends Component {
render() {
return (
<div>
Navbar
// Navbar的子组件
<Title></Title>
</div>
)
}
}
// 定义 Swiper 组件
class Swiper extends Component {
render() {
return (
<div>Swiper</div>
)
}
}
// 定义 Footer 组件
class Footer extends Component {
render() {
return (
<div>Footer</div>
)
}
}
export default class App extends Component {
render() {
return (
<div>
<Navbar></Navbar>
<Swiper></Swiper>
<Footer></Footer>
</div>
)
}
}
- 入口index.js文件导入组件 App
import React from "react";
import { createRoot } from "react-dom/client";
import App from './compontents/嵌套组件.js'
// 创建渲染根节点
const root = createRoot(document.getElementById("root"));
// 将类组件App渲染到根节点root中
root.render(<App/>);
10）组件的样式（推荐行内样式,将dom，样式，js统一一个文件）
行内样式 ==>语法规则 必须在双大括号{{}}中写样式
import React, { Component } from "react";
export default class App extends Component {
render() {
let obj = {
background: "red",
};
return (
<section>
<div style={obj}>样式1</div> // 第一种变量方式
<div style={{ backgroundColor: "yellow" }}>样式2</div> // 第二种直接写 js遇见{ }会当作js地盘
</section>
);
}
}
css方式
1. 在src下创建Css文件夹, .box{coler:red}
2. import '../css/aaa.css'; // 组件引入即可
import React, { Component } from "react";
import '../css/aaa.css';
export default class App extends Component {
render() {
let obj = {
background: "red",
};
return (
<section>
<div className="box">样式3</div>
</section>
);
}
}
11）react注释
import React, { Component } from "react";
export default class App extends Component {
render() {
let obj = {
background: "red",
};
return (
<section>
<div style={obj}>样式1</div>
<div style={{ backgroundColor: "yellow" }}>样式2</div>
{
// 这是注释
}
{
/**
* 这是注释
*/
}
</section>
);
}
}
12) 4种事件绑定
this指向问题
第二种直接舍弃掉
// 不传参的情况下 使用 第一和第三种
// 逻辑超少的情况下 可以使用第一种
// 传参的情况下 必须使用第四种
import React, { Component } from "react";
import '../css/aaa.css';
export default class App extends Component {
render() {
let obj = {
background: "red",
};
return (
<section>
<input></input>
<button onClick={()=>{console.log(123);}}>add1</button> //推荐
<button onClick={this.handle2}>add2</button>
<button onClick={this.handle3}>add3</button>
<button onClick={()=>this.handle4()}>add4</button> // 超级推荐
</section>
);
}
handle2(){
console.log(456);
}
handle3 = ()=>{
console.log(789);
}
handle4(){
console.log(666);
}
}
13）获取dom节点
第一种方案
import React, { Component } from "react";
export default class Ref extends Component {
mytext = React.createRef(); // 固定写法，避免ref种的节点名称相同
render() {
return (
<div>
<input ref={this.mytext}/> // 绑定获取该节点的dom名字 this.mytext
<button
onClick={() => {
console.log(this.mytext.current.value); // 实时获取Input框的值
}}
>
按钮
</button>
</div>
);
}
}
第二种方案(即将废弃)
import React, { Component } from "react";
export default class Ref extends Component {
render() {
return (
<div>
<input ref="mytext"/> // 绑定获取该节点的dom名字 mytext
<button
onClick={() => {
console.log(this.refs.mytext.value); // 实时获取Input框的值
}}
>
按钮
</button>
</div>
);
}
}
14) 列表数据渲染
import React, { Component } from 'react'
export default class App extends Component {
state = {
mytext: [1,2,3,4,5,6,7,8,9,10,11,12,,13,14,15,16,17]
}
render() {
return (
<div>
<ul>
{this.state.mytext.map(item => <li key={item}>{item}</li>)}
</ul>
</div>
)
}
}
15) 同步状态下状态并不一定会实时更新
import React, { Component } from 'react'
export default class App extends Component {
state = {
mytext: []
}
render() {
return (
<div style={{height:'100vh',background:'red'}}>
<div className='wrapper' style={{height:'200px',overflow:'hidden'}}>
<button onClick={this.add}>add</button>
<ul className='scroll22'>
{this.state.mytext.map(item => <li key={item}>{item}</li>)}
</ul>
</div>
</div>
)
}
add = ()=>{
let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
this.setState({
mytext:arr
},()=>{
console.log(this.state.mytext); # 在setState函数回调中可以准确获取到更新后的状态
})
console.log(this.state.mytext); # 此处不一定会获取到更新后的状态,存在概率
}
}
16）条件渲染
import React, { Component } from 'react'
export default class App extends Component {
state = {
ifshow:true
}
render() {
return (
<div>
{this.state.ifshow && <p>我是谁？如我所是</p>}
</div>
)
}
}
17) 组件父子通信
父组件代码
import React, { Component } from 'react'
import Chirdren from './compontents/chirdren' // 引入子组件
export default class App extends Component {
render() {
return (
<div>
<Chirdren title="首页" showright="false"></Chirdren>
</div>
)
}
}
子组件
import React, { Component } from 'react'
import rules from 'prop-types' # 引入自带验证属性
export default class Chirdren extends Component {
// 接受父组件传值
static propTypes = {
showright:rules.bool # 父组件传递得值必须为布尔值 否则控制台报错
}
// 设置默认值
static defaultProps = {
showright : true # 如果父组件不传值 默认值为rue
}
render() {
return (
<div>
<button>返回</button> 标题{this.props.title} {this.props.showright && <button>Home</button>}
</div>
)
}
}
/*
类添加方式
chirdren.defaultProps = {
showright:true
}
chirdren.propTypes = {
showright:rules.boll
}
*/
18） 函数式组件父子通信(不支持传递状态版)
父组件
import React, { Component } from 'react'
import Chirdren from './compontents/chirdren'
export default class App extends Component {
render() {
return (
<div>
<Chirdren title="首页" ></Chirdren>
</div>
)
}
}
子组件
import React from 'react'
import rules from 'prop-types'
export default function chirdren(props) {
let {title} = props
return (
<div>{title}</div>
)
}
chirdren.defaultProps = {
title:'我的'
}
chirdren.propTypes = {
title:rules.string
}
19） 表单组件Input实时获取value
import React, { Component } from 'react'
export default class App extends Component {
state = {
mytext:'123'
}
render() {
return (
<div>
<input type="text" value={this.state.mytext} onInput={this.getvalue}/>
<button onClick={this.clear}>清空</button>
</div>
)
}
// 获取值 并实时更新最新值到视图
getvalue = (e)=>{
this.setState({
mytext:e.target.value
})
}
// 清空值
clear = ()=>{
this.setState({
mytext:''
})
}
}
20）子父通信
子组件
class Chirdern extends Component {
render() {
return (
<div>
<button onClick={()=>{
// 子组件促发父组件留下的回调函数
this.props.ifshow()
}}>隐藏/显示(动态切换)</button>
</div>
);
}
}
class Navbar extends Component {
render() {
return (
<div style={{ width: "200px",background:'yellow'}}>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
);
}
}
父组件
export default class App extends Component {
state = {
isShow:false
}
render() {
return (
<div>
<Chirdern ifshow = {this.showNavbar}/> // 留下回调函数 让子组件进行触发
{this.state.isShow? <Navbar /> : ''} // 条件显示 Navbar组件
</div>
);
}
// 父组件留下的回调函数
showNavbar = ()=>{
this.setState({
isShow:!this.state.isShow
})
}
}
浙公网安备 33010602011771号