【React系列一】—React学习历程的分享

最新推荐文章于 2025-02-26 10:33:36 发布

Star Universe

最新推荐文章于 2025-02-26 10:33:36 发布

阅读量945

点赞数 24

分类专栏：星星的学习历程文章标签： react.js 学习前端 javascript es6 前端框架

本文链接：https://blog.youkuaiyun.com/m0_60623820/article/details/143105750

版权

星星的学习历程专栏收录该内容

20 篇文章

订阅专栏

一、关于React

用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源

那么为什么要学习React呢

原生 JavaScript 的痛点：

操作 DOM 繁琐、效率低
使用 JavaScript 直接操作 DOM，浏览器进行大量重绘重排
原生 JavaScript 没有组件化编码方案，代码复用率低

React 的特点：

采用组件化模式、声明式编码，提高开发效率和组件复用率
在 React Native 中可用 React 语法进行移动端开发
使用虚拟 DOM 和 Diffing 算法，减少与真实 DOM 的交互

二、JSX语法

全称：JavaScript XML
React 定义的类似于 XML 的 JS 扩展语法；本质是 React.createElement() 方法的语法糖
作用：简化创建虚拟 DOM

语法规则

定义虚拟 DOM 时，不要写引号
标签中混入 JS 表达式需要使用 {}
指定类名不用 class，使用 className
内联样式，使用 style={ { key: value } } 的形式
只能有一个根标签
标签必须闭合，单标签结尾必须添加 /：<input type="text" />
标签首字母小写，则把标签转换为 HTML 对应的标签，若没有，则报错
标签首字母大写，则渲染对应组件，若没有定义组件，则报错

条件渲染

// 1. 导入 React
import React from 'react';
import ReactDOM from 'react-dom';

const isLoading = true;

const loadData = () => {
    if(isLoading) {
        return <div>loading...</div>;
    }
    return <div>加载完成~</div>
}

const title = <h1>Hello {loadData()}</h1>;

// 3. 渲染 React
ReactDOM.render(title, document.getElementById('root'));

其中包括三元运算符和逻辑运算符就不一一演示了~

三、组件化编程

组件是 React 的一等公民，使用 React 就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合

类式组件

约定1：类名称也必须要大写字母开头
约定2：类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或者属性
约定3：类组件必须提供 render 方法
约定4：render 方法中必须要有 return 返回值

// 创建 class 类，继承 React.Component，在里面提供 render 方法，在 return 里面返回内容
class Hello extends React.Component{
    render(){
        return (
            <div>这是第一个类组件</div>
        )
    }
}
// 通过 ReactDOM 进行渲染
ReactDOM.render(<Hello />,document.getElementById('root'))

函数式组件

约定1：函数名称必须是以大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
约定3：如果返回值为null，则表示不渲染任何内容

四、事件处理

事件绑定

React 事件绑定语法与 DOM 事件语法相似
语法：on+事件名称=事件处理函数，比如 onClick = function(){}
注意：React 事件采用驼峰命名法

类组件—事件绑定

export default class extends React.Component {
    clickHandle(e){
        console.log('点了')
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

函数组件—事件绑定

export default () => {
    function handleClick(e) {
        console.log(e.nativeEvent);
    }
    return (
        <div onClick={handleClick}>hello world</div>
    )
}

事件对象

可以通过事件处理函数的参数获取到事件对象
react中的事件对象叫做合成事件
合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口
如果要获取原生事件对象，可以通过nativeEvent属性获取

export default class extends React.Component {
    clickHandle(e){
        // 获取原生事件对象
        console.log(e.nativeEvent.target.innerHTML);
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}