react学习笔记

最新推荐文章于 2023-09-09 15:33:40 发布

是草莓味的啊

最新推荐文章于 2023-09-09 15:33:40 发布

阅读量238

点赞数

分类专栏： Web前端文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43908649/article/details/123046413

版权

Web前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

实习工作使用的技术栈是React+React DVA+React Umi+React AntDesign+React AntDesignPro

一、React基础

1.1.初始react

npm i react react-dom：打开项目所在终端安装react

<body>
    <div id="root"></div>
    <!-- 1.引入js文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script>
        // 2.创建react元素
        // 参数一：元素名称
        // 参数二：元素属性
        // 参数三：其他子节点(可以有多个)
        const title=React.createElement('h1',null,'我是标签',React.createElement('span',{'name':'innerspan','id':'innerspan'}))
        // 3.渲染react
        // 参数一：要渲染的react元素
        // 参数二：挂载点(渲染位置)
        ReactDOM.render(title,document.getElementById('root'))
    </script>
</body>

1.2.react脚手架

使用react脚手架初始化项目：npx create-react-app 自己项目名（my-app）
在项目根目录下运行命令（cd my-app）：npm start

npx 命令介绍：提升包内提供的命令行工具的使用体验，无须安装脚手架包，就可以直接使用包内提供的命令

// src/index.js
// 导入React
import React from 'react';
import ReactDOM from 'react-dom';
// 创建react元素
const title=React.createElement('h1',null,'好标签')
// 渲染react元素
ReactDOM.render(title,document.getElementById('root'))

<!-- public/index.html -->
<div id="root"></div>

1.3.jsx

使用jsx创建react元素，使用小括号()包裹标签，使用{}来调用js中的变量或者函数

// 导入React
import React from 'react';
import ReactDOM from 'react-dom';
// 使用jsx创建react元素，使用小括号()包裹标签，使用{}来调用js中的变量或者函数
const name = "Jack"
const namediv = (
    <div>您好，我叫{name}</div>
)
// 渲染react元素
ReactDOM.render(namediv,document.getElementById('root'))

1.3.1.条件渲染

if-else、三元运算符、逻辑运算符（ && ，逻辑中断，适合要么显示，要么隐藏的）

// 条件渲染
const loading = false
// if-else
const loadData = () => {
    if(loading){
        // className='title' 使用加类名的方式进行样式处理
        // 样式要单独写在一个css中
        // 要在js文件中引入css文件
        return <div className='title'>数据加载中...</div>
    }
    return <div className='title'>数据加载完毕</div>
}
// 三目运算
const loadData2 = () => {
    return loading?(<div>加载中...</div>):(<div>加载完毕</div>)
}
// 逻辑运算符 &&
const loadData3 = () => {
    return loading && (<div>加载中...</div>)
}
const dv = (
    <div>{loadData3()}</div>
)
// 渲染react元素,应该子节点中只能渲染一个react元素
ReactDOM.render(dv,document.getElementById('root'))

1.3.2.列表渲染

// 1.创建数组
const songs = [
    {id: 1,name:'哈'},
    {id: 2,name:'哈哈'},
    {id: 3,name:'哈哈哈'}
]
// 2.使用map()方法，渲染列表时应该添加上key属性，且要保证key值唯一
// map遍历谁，就给谁添加key属性
// 尽量避免使用索引号作为key
const list = (
    <ul style={{color:'red',backgroundColor:'blue'}}>
        {songs.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
)
// 3.渲染react元素
ReactDOM.render(list,document.getElementById('root2'))

1.3.3.样式处理

// 方法1（不推荐）：添加行内样式,外层大括号是调用，内层大括号是样式对象
<h1 style={{color:'red',backgroundColor:'blue'}}>
	这是一个h1标签
</h1>

// 方法2（推荐）
// 在src下创建一个css/index.css文件，样式要单独写在一个css中
.title{
    text-align: center;
}
// 在js文件中引入css文件
import './css/index.css';
// className='title' 使用加类名的方式进行样式处理
<div className='title'>数据加载中...</div>

二、React组件

2.1.创建React组件

2.1.1.使用函数创建组件

使用函数方式创建组件和使用箭头函数创建组件
组件名称必须是大写字母开头
渲染调用组件时，函数名为组件标签名
必须有 return 返回值，如果没有就return null

// 1、使用函数方式创建组件
function Hello(){  // 组件名称必须是大写字母开头
    console.log(this)   // 此处的this是undefined，因为babel编译开启了严格模式（开启严格模式后就不让指向window了）
    return (
        <div>这是我的第一个函数组件</div>
    )
    // return null
}
ReactDOM.render(<Hello />,document.getElementById('root')) // 渲染调用组件时，函数名为组件标签名
// 2、使用箭头函数创建组件
const Hello2 = () => <div>这是我的第一个箭头函数组件</div>
// 1.React解析组件标签，找到Hello3组件
// 2.发现组件使用的是函数定义的，随后调用该函数
ReactDOM.render(<Hello2/>,document.getElementById('root2'))

2.1.2.使用类创建组件

类组件：使用ES6的class创建组件

关于类的一些点

// 类组件
// 约定1：类名称必须大写字母开头
// 约定2：类组件应该继承React.Component父类，从而调用父类中提供的方法和属性
// 约定3：类组件必须提供render()方法
// 约定4：render()方法必须有return返回值,返回的内容作为类组件的结构，如果没有return null
class Hello3 extends React.Component {
	// render放在Hello3的原型对象上，供实例使用
	// render中的this指向Hello3的实例对象
    render(){
        return (
            <div>这是我的第一个类组件</div>
        )
        // return null
    }
}
// 1.React解析组件标签，找到Hello3组件
// 2.发现组件使用的是类定义的，随后new出该实例，并通过该实例调用到原型上的render发放
// 3.将render返回的虚拟DOM转化为真实DOM，并呈现到页面中
ReactDOM.render(<Hello3/>,document.getElementById('root2'))