react基础篇

已于 2025-03-21 17:44:43 修改
阅读量930 收藏 30
点赞数 8
分类专栏： React 文章标签： javascript 前端 react.js
于 2024-07-17 13:05:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Lil_y1/article/details/140491927
版权

前言：

        通过学习尚硅谷react课程基础篇的一些小笔记

01_虚拟DOM两种创建方式

  • js创建

//1.创建虚拟DOM
const VDOM = React.createElement('h1', { id: 'title' },'Hello_React')
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.querySelector('#test'))

  • jsx创建

//1.创建虚拟DOM
const VDOM = (
    <h1 id="title">
        <span>hello_react</span>
    </h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.querySelector('#test'))

02_关于虚拟DOM

  • 本质是object类型的对象(一般对象)

  • 虚拟DOM比较'轻',真实dom比较'重',即身上的方法.因为虚拟DOM是react在使用 无需真实dom那么多的属性

  • 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

03_jsx语法规则

  • 定义虚拟DOM时,不要写引号

  • 标签中混入JS表达式时要用{}

  • 样式的类名指定不能使用class,只能是calssName

  • 只能有一个根标签

  • 标签必须闭合

  • 内联样式,要用style={{key:value}}的形式来写

  • 标签首字母

    • 若小写字母开头 则将标签转为html中同名元素

    • 若大写字母开头 react就去渲染对应的组件 若没有对应的组件就报错



//1.创建虚拟dom
const VDOM = (
    <div>
        <h1 id={myId.toLowerCase()}>
            <span className='demo'>{myData.toUpperCase()}</span>
        </h1>
        <p style={{ backgroundColor: 'orange', color: 'green' }}>内联样式</p>
        <input type="text" />
    </div>
    )
​
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.querySelector('#test'))

04_jsx中的{}的注意点

jsx中{}里只能包含表达式不能包含语句

  • 表达式：一个表达式会产生一个值 可以放到任何一个需要值的地方

    • 例: (1):a

    ​            (2):a+b

    ​            (3):demo()

    ​            (4):arr.map()

  • 语句(代码)

    • 例: (1):if(){}

    ​             (2):for(){}

    ​             (3):swich(){}

05_react创建组件

  • 函数式组件

    • 执行了渲染发生了：

      • react 解析组件标签找到了MyComponent组件

      • 发现是函数定义的 将函数返回值的虚拟DOM转化为真实DOM，随后呈现在页面.

// 1.创建函数式组件
function MyComponents() {
    return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
// 2.渲染组件到页面
ReactDOM.render(<MyComponents />, document.querySelector('#test'))

  • 类式组件

    • 执行了渲染发生了：

      • react 解析组件标签找到了MyComponent组件

      • 发现是类定义的 随后自动new出来该类的实例，并通过实例调用到原型上的render方法

      • 将render 返回值的虚拟DOM转化为真实DOM，随后呈现在页面中

    // 1.创建一个类式组件
class MyComponents extends React.Component {
    render() {
        //render 是MyComponents的原型对象上 供实例使用
        return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
    }
}
// 2.渲染组件到页面
ReactDOM.render(<MyComponents />, document.querySelector('#test'))

06-组件实例的三大属性-state

完整写法

class Weather extends React.Component {
    constructor(props) {
        super(props)
        // 初始化状态
        this.state = { isHot: false }
        // 解决toggleHot中的this指向问题
        this.toggleHot = this.toggleHot.bind(this)
    }
    render() {
        // 读取状态
        const { isHot } = this.state
        return <h2 onClick={this.toggleHot}>今天的天气很{isHot ? '炎热' : '凉爽'}</h2>
    }
    toggleHot() {
        // 直接修改state中的值 要调用setState这个API
        this.setState({isHot:!this.state.isHot})
    }
​
}
ReactDOM.render(<Weather />, document.querySelector('#test'))

简写

class Weather extends React.Component {
    // 初始化状态
    state = { isHot: true }
render() {
    const { isHot } = this.state
    return <h2 onClick={this.toggleHot}>今天的天气很{isHot ? '炎热' : '凉爽'}</h2>
}
// 自定义方法 --  要用赋值语句的形式+箭头函数
toggleHot = () => {
    this.setState({ isHot: !this.state.isHot })
    }
}
ReactDOM.render(<Weather />, document.querySelector('#test'))

07_组件实例的三大属性-props

  • props的基本使用

    class Person extends React.Component {
    render() {
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>name:{name}</li>
                <li>age:{age + 1}</li>
                <li>sex:{sex}</li>
            </ul>
        )
    }
}
//  传入不同的值
ReactDOM.render(<Person name='Tom' age={19} sex='男' />, document.querySelector('#test'))
ReactDOM.render(<Person name='jerry' age={17} sex='女' />, document.querySelector('#test2'))

  • 对props进行限制

    //此时在类外面创建
// 对props参数进行限定
Person.propsTypes = {
    name: PropTypes.string.isRequired, // 限制name属性为必填和必须为字符串
    age: PropTypes.number, // 限制age属性必须为数字
    sex: PropTypes.string, // 限制sex属性为字符串
    speak: PropTypes.func  // 限制speak是个函数
}
// 对props参数设置默认值
Person.defaultProps = {
    sex: '男',
    age: 18
}

  • 类型限制的简写形式

    //此时在类中创建使用static关键字
static propsTypes = {
    name: PropTypes.string.isRequired, // 限制name属性为必填和必须为字符串
    age: PropTypes.number, // 限制age属性必须为数字
    sex: PropTypes.string, // 限制sex属性为字符串
    speak: PropTypes.func  // 限制speak是个函数
}
// 对props参数设置默认值
static defaultProps = {
    sex: '男',
    age: 18
}

  • 函数组件的props用法

// 对参数进行限定---Person创建的函数组件
Person.propsTypes = {
    name: PropTypes.string.isRequired, // 限制name属性为必填和必须为字符串
    age: PropTypes.number, // 限制age属性必须为数字
    sex: PropTypes.string, // 限制sex属性为字符串
    speak: PropTypes.func  // 限制speak是个函数
}
// 对props参数设置默认值
Person.defaultProps = {
    sex: '男',
    age: 18
}

08_组件实例的三大属性-refs

字符串写法

showData = () =>{
    console.log(this.refs.input1.value);
}
showData2 = () =>{
    console.log(this.refs.input2.value);
}
render(){
    return (
        <div>
            <input ref="input1" type="text" placeholder="点击按钮提示数据" />
            <button onClick={this.showData}>点击展示左侧输入的值</button>
            <input ref="input2" type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} />
        </div>
    )
}

回调函数写法

showData = () => {
    console.log(this.input1.value);
}
showData2 = () => {
    console.log(this.input2.value);
}
render() {
    return (
    <div>
        <input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" />
        <button onClick={this.showData}>点击展示左侧输入的值</button>
        <input ref={c => this.input2 = c} type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} />
    </div>
    )
}

CreateRefs写法

​ 每个ref指定的元素都只能有一个createRef()接收

myRef1 = React.createRef()
myRef2 = React.createRef()
showData = () => {
    console.log(this.myRef1.current.value);
}
showData2 = () => {
    console.log(this.myRef2.current.value);
}
render() {
    return (
        <div>
            <input ref={this.myRef1} type="text" placeholder="点击按钮提示数据" />
            <button onClick={this.showData}>点击展示左侧输入的值</button>
            <input  ref={this.myRef2} type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} />
        </div>
    )
}

09_事件处理

  • 通过onXxx属性指定事件处理函数（注意大小写）

    • :React使用的是自定义事件，而不是使用的原生DOM事件 ---为了兼容性

    • React中的事件是通过事件委托方式处理的 --- 为了高效

  • 通过exent.target得到发生事件的DOM元素对象

showData = () => {
    console.log(this.input1.value)
}
showData2 = (e) => {
    console.log(e.target.value)
}
render() {
    return (
        <div>
            <input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" />
            <button onClick={this.showData}>点击展示左侧输入的值</button>
            <input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} />
        </div>
    )
}

10_表单提交数据

非受控组件

handleSubmit = (e) => {
    e.preventDefault()
    const { userName, password } = this
    console.log(`用户名是${userName.value},密码是${password.value}`);
}
render() {
    return (
        <form onSubmit={this.handleSubmit}>
            用户名： <input ref={c => this.userName = c} type="text" name="username" />
            密码： <input ref={c => this.password = c} type="password" name="password" />
            <button>提交数据</button>
        </form>
    )
}

受控组件

state = { userName: '', password: '' }
saveUserName = (e) => {
    this.setState({ userName: e.target.value })
}
savePassword = (e) => {
    this.setState({ password: e.target.value })
}
handleSubmit = (e) => {
    e.preventDefault()
    const { userName, password } = this.state
    console.log(`用户名是${userName},密码是${password}`);
}
render() {
    return (
        <form onSubmit={this.handleSubmit}>
            用户名： <input onChange={this.saveUserName} type="text" name="username" />
            密码： <input onChange={this.savePassword} type="password" name="password" />
            <button>提交数据</button>
        </form>
    )
}

11_高阶函数和函数柯里化

  • 高阶函数:如果一个函数符合下列两个条件之一 就是高阶函数

    • 该函数接收的参数是一个函数 那么该函数可以呗称之为高阶函数

    • 该函数调用的返回值依然是一个函数 就被称之为高阶函数

    • 例 ：Promise setTimeout arr.map()等

  • 函数的柯里化

    • 通过函数的调用继续返回函数的方式 实现多次接收参数最后统一处理函数的编码形式

state = { username: '', password: '' }
saveFormData = (DataType) => {
    return (e) => {
        this.setState({[DataType]:e.target.value})
    }
}
​
handleSubmit = (e) => {
    e.preventDefault()
    const { username, password } = this.state
    console.log(`用户名是${username},密码是${password}`);
}
render() {
    return (
        <form onSubmit={this.handleSubmit}>
            用户名： <input onChange={this.saveFormData('username')} type="text" name="username" />
            密码： <input onChange={this.saveFormData('password')} type="password" name="password" />
            <button>提交数据</button>
        </form>
    )
}

12_生命周期

旧生命周期

新生命周期

  • 在新版本中 修改了：

    • componentWillMount钩子 修改为UNFAFE_componentWillMount 后续版本可能废弃

    • componentWillUpdate钩子 修改为UNFAFE_componentWillUpdate 后续版本可能废弃

    • componentWillReceiveProps钩子 修改为UNFAFE_componentWillReceiveProps 后续版本可能废弃

  • 在新版本中 新增了：

    • getDerivedStateFromProps 若state的值在任何时候都取决于props,那么就可以使用getDerivedStateProps

    • getSnapshotBeforeUpdate 在更新渲染之前做些事情 例获取更新前的滑轮距离...

React基础篇——16.0-17.0版本
yezhihaobk的博客
07-05 1540
react是什么、为什么学、JSX语法规则、模块化与组件、模块化与组件化的理解、组件实例三大属性,高阶函数和函数柯里化,组件的生命周期、key的作用
React基础篇之css样式的配置使用
GitChat
02-12 446
本小节将讲述在 webpack 配置的打包 React 项目中，配制 css 的基本使用以及同时加载其他三方 css
React 基础篇（一）
浅陌繁星的博客
07-26 793
是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
React 基础篇（七）—— Context
2401_84092483的博客
05-06 727
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
React基础篇（上）
前端工程师的修炼笔记
01-08 605
React.js 基础篇 （小白零基础入门React）
react 基础篇 1 hello React
笑望灬星辰
05-20 184
react 基础篇 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>helloReact</title> </head> <body> <!-- 容器 和Vue 的一样 --> <div id="app"></div> <!-- 引入react核心库 -->
React基础篇（三）之 webpack打包项目配制
代码小疯子
02-10 1367
创建项目 目录 1 初始化项目 使用 IDE 打开目录 在命令行中初化化项目 npm init -y 然后安装 webpack cnpm i webpack -D 然后安装 webpack-cli webpack-cli 用来执行webpack相关命令 cnpm i webpack-cli -D 创建 源代码src目录、打包输出目录 dist目录 然后在 src 目录中 创建 in...
React基础篇（四）之创建组件方式分析
代码小疯子
02-12 747
1 React中创建组件方式一 1.1 创建组件并在浏览器中渲染效果 //第一步 导入依赖 //这两个导入进，接收的成员变量名称必须这样写 //用来创建组件、虚拟DOM元素 生命周期 import React from 'react'; //所创建好的组件和虚拟DOM放到页面上展示 import ReactDOM from 'react-dom'; //创建组合的第一种方式 function...
React基础篇（二）之点击button修改属性值
代码小疯子
02-10 4540
本篇将实现点击一个按钮动态修改数据 上一篇 React 项目的初始化创建 1 index.html 中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>启动页面</title> <!--React相关的依赖--...
react 改变css样式_React基础篇（五）css样式的使用
weixin_29802189的博客
02-21 871
本小节主要讲述在 React中使用css scss 以及其他第三方如bootstrap的css样式配置1 前言在 JSX 中，如果需要写行内样式，不能为 style 设置字符串的值，而是应该写成style={{ color:'red',zIndex:3}}在一个使用案例中上一篇中有写到，未设置样式前设置style 样式后import React from 'react';import Course...
React 基础篇（二）
浅陌繁星的博客
07-26 1393
React的style样式、注释、className类名、props、条件渲染、循环渲染、插槽、state、setState、事件的参数与this的指向、受控组件、状态提升等基础知识
React基础篇（一）：React生命周期及其使用场景
zhehoon123的博客
07-29 801
1、首先大致一下生命周期三个类型和三个阶段 三个类型：创建时、更新时、卸载时 三个阶段：“Render”阶段、“Pre-commit”阶段、“Cimmit”阶段 2、生命周期方法的调用过程 ①创建时： 一、“Render”阶段 先执行构造函数constructor：一个组件首先要创建出来 getDerivedStateFromProps：用于从一些外部的属性初始化一些状态，从这个方法返回的状态都可merge到当前的状态上 render：描述你的UI的dom结构的地方，这个也是唯一一个必须定义的生命周期方法
React基础篇（四）：Context API
zhehoon123的博客
07-30 772
一、什么是Context API ① Context API解决的是一个组件间通信的问题，有一些全局的状态我们需要多个组件都去使用，但是组件如果都是一层层传递会非常麻烦，所以我们可以使用Context API来避免这种层层传递，实现跨层使用state。 ② 在Context API中，节点有两种类型：provider和consumer。provider就是提供状态的那个组件，consumer是使用状态的那个组件。 ③ 我们要实现Context API通信，必须把consumer包含在provider层级之下
(精华2020年5月24日更新) react基础篇 pwa的配置
热门推荐
一点一滴
05-24 1万+
首先 npm i workbox-webpack-plugin 在到webpack配置文件中添加插件 const WorkboxWebpackPlugin = require('workbox-webpack-plugin') plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), new WorkboxWebpackPlugin.GenerateSW({
React PDF Annotation plugin library online API examples
WCX_joker的博客
04-03 1014
The API includes ① Export edited PDF data; ② Export annotations json data; ③ Reload old annotations; ④ Change files; ⑤ Set member info; ⑥ Clear annotations and other data processing functions
网络空间安全（50）JavaScript基础语法
m0_73399576的博客
04-03 384
网络空间安全——JavaScript基础语法篇
TypeScript语言的操作系统原理
2501_91409199的博客
04-04 963
操作系统是计算机系统中最重要的组成部分之一，它为应用程序提供了一个运行环境，并管理着计算机硬件和软件资源。随着编程语言的发展，特别是TypeScript的流行，许多开发者开始探索将这种强类型语言应用于操作系统的实现与学习中。本文将探讨TypeScript语言的操作系统原理，包括操作系统的基本概念、TypeScript的特性、TypeScript在操作系统开发中的应用以及两者的结合如何增强操作系统的可维护性和可扩展性。
JavaScript高级教程一起学
最新发布
大道至简
04-05 217
javaScript高级教程 一起学习
解决 axios get请求瞎转义问题
cypking的博客
04-03 352
axios是一个强大的HTTP客户端库，适用于发送各种HTTP请求。qs是一个处理查询字符串的库，特别适合与axios结合使用，尤其是在处理POST请求时。你可以通过全局配置或局部配置来使用qs，并且可以根据需要调整序列化和解析的行为。希望这些信息对你有帮助！如果你有更多问题，欢迎继续提问。
React组件引用与基础教程
本文档主要介绍了React的基础知识，包括组件引用、命名规范、注释使用、生命周期、状态管理和父子组件间的通信，适合React初学者入门学习。 在React开发中，组件是核心概念。组件是可重用的代码块，可以看作是独立...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值