React 学习笔记

最新推荐文章于 2024-06-19 19:52:41 发布
最新推荐文章于 2024-06-19 19:52:41 发布
阅读量498 收藏 1
点赞数 1
分类专栏： 前端 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49457619/article/details/123023820
版权

React 学习笔记

特点

  • 声明式
  • 基于组件

入门

基本使用

html

<div id="root"></div>

js

/*
* 创建 react 元素
* 1. 元素名称
* 2. 元素属性
* 3. 第三个及其以后的参数都是元素的子节点
*/
const title = React.createElement("h1", null,  "hello react")

/*
* 1. 要渲染的 react 元素
* 2. 挂载点
*/
ReactDOM.render(title, document.getElementById("root"))

给添加属性

const title = React.createElement("h1", { title: '我是标题', id: 'p1' },  "hello react")

元素属性里添加子节点

const title = React.createElement("h1", { title: '我是标题', id: 'p1', React.createElement('span', null, '我是 span 节点') },  "hello react")

脚手架使用 React

  • 导入 react 和 react-dom
  • 调用 React.createElement() 创建 react 元素
  • 调用 ReactDOM.render() 渲染 react 元素到页面中
import React from 'react'
import ReactDOM from 'react-dom'

const title = React.createElement('h1', null, 'hello react')
ReactDOM.render(title, document.getElementById('root'))

JSX

注意点:
    React元素的属性名使用驼峰命名法
    特殊属性名： class->className   for->htmlFor    tabindex->tabIndex
    没有子节点的 React 元素可以用 /> 结束，比如 <span /> 表示 <span></span>
    推荐使用小括号包裹 JSX

概述

  • createElement() 不好用，不直观
  • JSX 避免了这个缺点
  • JSX 和 html 几乎一样
  • JSX = JavaScript XML

基本使用

import React from 'react'
import ReactDOM from 'react-dom'

const title = <h1> Hello JSX </h1>
ReactDOM.render(title, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'

const dv = (
    <h1> hello dv </h1>
)

const title = <h1 className="title"> Hello JSX </h1>
ReactDOM.render(title, document.getElementById('root'))

使用 Js 表达式

const name = 'Jack'
const dv = (
    <h1> my name is {name}
)

条件渲染

const isLoading = true
const loadData = () => {
    if (isLoading) {
        return <div>loading...</div>
    }
    return <div>success</div>
}

const _loadData = () => {
    return isLoading ? (<div>loading...</div>) : (<div>success</div>)
}

const __loadData = () => {
    return isLoading && (<div>loading...</div>)
}

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

列表渲染

const songs = [
    {id: 1, name: 'one'},
    {id: 2, name: 'two'}
]

const list = (
    <ul>
        {songs.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
)

样式处理

import './css/index.css'

// 行内样式
const line = (
    <h1 style={{color: 'red', backgroundColor: 'white'}}>
        行内样式
    </h1>
)

// 使用类名的方式添加样式
const line2 = (
    <h2 className="title"></h2>
)

组件

组件创建

  1. 使用函数创建
  2. 使用类创建组件
  • 使用函数创建组件
  1. 函数名称必须以大写字母开头
  2. 函数组件必须有返回值，表示该组件的结构
  3. 如果返回值为 null，表示不渲染任何内容
function Hello() {
    return (
        <div>函数组件</div>
    )
}

/**
 * 简洁一点的写法
 * const Hello = () => <div>函数组件</div>
 * /

ReactDOM.render(<Hello />, root)
  • 使用类创建组件

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

  1. 类名称必须大写字母开头
  2. 类组件应继承 ReactComponent 父类，从而可以使用父类中提供的方法或属性
  3. 类组件必须提供 render()
  4. render() 必须有返回值，表示该组件结构
class Hello extends React.Component {
    render() {
        return (
            <div>类组件</div>
        )
    }
}

ReactDOM.render(<Hello />, root)

组件抽离为单独文件

  1. 创建 Hello.js
  2. 在 Hello.js 中导入 React
  3. 创建组件
  4. 在 Hello.js 中导出该组件
    5 在 index.js 中导出 Hello 组件
  5. 渲染组件

Hello.js

import React from 'react'

class Hello extends React.Component {
    render() {
        return (
            <div>抽离组件</div>
        )
    }
}

export default Hello

index.js

import React from 'react'
import ReactDOM from 'react-dom'

import Hello from './Hello'

ReactDOM.render(<Hello />, root)

事件处理

React 事件处理与 DOM 类似

语法： on+事件名称={事件处理程序}，如 onClick={()=>{}}

React 事件采用驼峰命名法，比如 onClick、onFocus

简单 demo

class App extends React.Component {
    handle() {
        console.log('单击事件触发了')
    }
    render() {
        return (
            <button onClick={this.handle}>click me</button>
        )
    }
}

事件对象

可以通过事件处理程序的参数获取事件对象

React 中的事件对象叫做： 合成事件（对象）

合成事件：兼容所有游览器，无需担心跨游览器兼容性问题

class App extends React.Component {
    handle(e) {
        // 阻止游览器默认行为
        e.preventDefault()
        console.log('a 标签点击了')
    }
    render() {
        return (
            <a href="http://itcast.cn" onClick={this.handle}>传智</button>
        )
    }
}

有状态组件和无状态组件

函数组件叫无状态组件，类组件又叫做有状态组件

状态(state)即数组

函数组件没有自己的状态，只负责数据展示(静)

类组件有自己的状态，负责更新 UI ，让页面动起来

  • state 基本使用

状态 state 即数据，是组件内部的私有数据，只能在组件内部使用

state 的值是对象，表示一个组件中可以有多个数据

状态是私有的，只能在组件内部使用

通过 this.state 获取状态

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
    }
    /**
     * 简化语法
     * state = {
     *  count: 0
     * }
    */

    handle(e) {
        // 阻止游览器默认行为
        e.preventDefault()
        console.log('a 标签点击了')
    }
    render() {
        /**
         * 请不要直接修改， this.state.count += 1 是错误的
        */
        return (
            <h1>计数器 {this.state.count}</h1>
            <button onClick={() => {
                this.setState({count: this.state.count +1})
            }}>+1</button>
        )
    }
}

从 JSX 中抽离事件处理程序

  • 如果 JSX 中掺杂了过多 js 代码，会显得非常混乱
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
    }

    incr(e) {
        // 事件处理程序的 this 是 undefined
        this.setState({count: this.state.count + 1})
    }
    render() {
        /**
         * 请不要直接修改， this.state.count += 1 是错误的
        */
        return (
            <h1>计数器 {this.state.count}</h1>
            // c 这是不行的
            /**
             * 箭头函数自身是不绑定 this 的，因此可写成 onClick={() => this.incr()}
            */

           /**
            * 利用 es5 的 bind()，将事件处理程序中的 this 与组件实例绑定到一起
            * 需要在 constructor() 中改动
            * constructor() {
            *   super()
            *   this.incr = this.incr.bind(this)
            * }
            * 
            * 这样后就可以 <button onClick={this.incr}>+1</button>
           */
          
          /**
           * 事件处理程序高阶用法
           * incr = () => {
           *    this.setState({count: this.state.count + 1})
           * }
          */
        )
    }
}

表单处理

表单是可输入的，也就是有自己的可变状态

React 希望所有的可变状态都保存到 state 中，并且只能通过 setState() 修改

  • 受控组件
class App extends React.Component {
    state = {
        txt: '',
        city: 'bj'
    }

    /**
     * 处理 textarea、select 也是这样的
     * 处理复选框流程是为每个选项设置一个 state ，通过检查 state 确认是否选中，但属性是 checked
    */
    handleChange = e => {
        this.setState({
            txt: e.target.value
        })
    }

    handleCity = e => {
        this.setState({
            city: e.target.value
        })
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.txt} onChange={this.handleChange}>
                <select value={this.state.city} onChange={this.handleCity}>
            </div>
        )
    }
}

万能表单处理 handle，但需要为每个表单项添加 name 属性
这能简化代码量

handle = e => {
    const target = e.target
    
    const value = target.type == 'checkbox' ? target.checked : target.value
    const name = target = name
    this.setState({
        [name]: value
    })
}
  • 非受控组件

借助于 ref，使用元素 DOM 方式来获取表单元素值

ref 作用： 获取 DOM 或组件

class App extends React.Component {
    constructor() {
        super()
        this.txtRef = React.createRef()
    }

    getTxt = () => {
        console.log(this.txtRef.current.value)
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.txtRef} />
                <button onClick={this.getTxt}>获取文本框的值</button>
            </div>
        )
    }
}

组件通讯

组件是封闭的，要接收组件的数据应该通过 props 来实现

props 作用： 接收传递给组件的数据

传递数据： 函数组件通过参数 props 来传递数据，类组件通过 this.props 接收数据

props 是只读对象，不能对其进行修改

  • 函数接收数据
function Hello(props) {
    console.log(props)
    return (
        <div>{props.name}</div>
    )
}

/**
 * 使用： <Hello name="jack">
*/
  • 类接收数据
class Hello extends React.Component {
    render() {
        return (
            <div>{this.props.age}</div>
        )
    }
}

/**
 * 使用： <Hello age={19}>
*/

注意，如果使用类组件时写了构造函数，应该把 props 传递给 super()，否则无法在构造函数中获取到 props（注意，不影响 render()，只对构造函数有影响）

class Hello extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
    }
    
    render() {
        return null
    }
}
三种通讯方式
  • 父组件传递数据给子组件
class Parent extends React.Component {
    state = {
        lastName: 'wang'
    }

    render() {
        return (
            <Child name={this.state.lastName}>
        )
    }
}

const Child = props => {
    return (
        子组件接收到的数据是： {props.name}
    )
}
  • 子组件传递数据给父组件

思路： 利用回调函数，子组件调用，将要传递的数据作为回调函数的参数

class Parent extends React.Component {
    getChildMsg = data => {
        console.log(data)
    }

    render() {
        return (
            <Child getMsg={this.getChildMsg} />
        )
    }
}

class Child extends React.Component {
    state = {
        msg: '刷抖音'
    }

    click = () {
        this.props.getMsg(this.state.msg)
    }

    render() {
        return (
            <button onClick={this.click}>点我，向父组件传递数据</button>
        )
    }
}
  • 兄弟组件通讯

将共享组件提升到最近的公共父组件中，由公共父组件管理这个状态

思想： 状态提升

// 父组件
class Counter extends React.Component {
    state = {
        count: 0
    }

    // 提供修改状态的方法
    onIncr() = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <Child1 count={this.state.count} />
            <Child2 onIncr={this.onIncr} />
        )
    }
}

const Child1 = props => {
    return <h1>计数器： {props.count}
}

const Child2 = props => {
    return <button onClick={() => props.incr()}>+1<button>
}
多层组件传递数据
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
    render() {
        <Provider value="pink">
            <Node />
        </Provider>
    }
}

const Node = props => {
    /**
     * 虽然写法怪异，但还是得按照他的要求来写
    */
    return (
        <Consumer>
            {
                data => <span>我是子节点 -- {data}</span>
            }
        </Consumer>
    )
}

props 属性深入

children 属性

当组件标签有子节点时才会有 children 属性

const App = props => {
    return (
        <div>
            <h1>组件标签的子节点:</h1>
            {props.children}
        </div>
    )
}

ReactDOM.render(<App>我是子节点</App>, document.getElementById('root'))

props 默认值

const App = props => {
    return (
        <h1>此处展示 props 的默认值: {props.pageSize}
    )
}

App.defaultProps = {
    pageSize: 10
}

ReactDOM.render(<App />, document.getElementById('root'))

声明周期

  • 创建时
    constructor() -> render() -> componentDidMount()

  • 组件更新时机

    1. New props
    1. setState()
    1. forceUpdate()

React 路由

现代的前端应用大多是 SPA (单页应用程序)

前端路由是一套映射规则，在 React 中，是 URL路径 与 组件 之间的关系

基本使用

  1. 安装 react-router-dom
  2. 导入路由的三个核心组件: Router/Route/Link
  3. 使用 Router 组件包裹整个应用
  4. 使用 Link 组件作为导航菜单（路由入口）
  5. 使用 Route 组件配置路由规则和要展示的组件(路由出口)
  • 安装
cnpm install react-router-dom --save
  • 使用
// 导入组件
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const First = () => <p>页面一的内容</p>

// 使用 Router 组件包裹整个应用
const App = () => (
    <Router>
        <div>
            <h1>React 路由基础</h1>
            {/* 指定路由入口 */}
            <Link to="/first">页面一</Link>

            {/* 指定路由出口 */}
            <Route path="/first" component={First}>
        </div>
    </Router>
)

编程式导航

其实就是通过 JS 代码来实现页面跳转

handle = () => {
    this.props.history.push('/home')
}

返回 n 个页面(整数或负数)

this.props.history.go(1)

默认路由

<Route path="/" component={Home}>

路由匹配模式

默认情况下，React 使用模糊匹配模式
给 Route 组件添加 exact 属性，让其变为精确匹配模式

<Route exact path="/" component={Home}>
「已注销」
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用React创建一个web3的前端
smartContractXH的博客
09-05 1879
让用户将他们的Metamask钱包连接到网站上允许用户调用一个合约函数，进行支付，并铸造一个NFT。在本教程结束时，你将拥有一个用React构建的功能齐全的web3前端。你也将获得构建任何通用的web3前端所需的基础知识（除了NFT minter）。
使用 React、Web3.js 和 Metamask 构建 Web3 dApp 身份验证
橡皮擦不去的争执的博客
05-08 925
我们创建一个函数，它接受三个参数并将信息保存到我们的本地存储中，这样我们就不会在用户不小心刷新浏览器时丢失。取得了很大的进步，因为即使我们刷新也不会丢失信息，这暂时解决了我们的数据持久性问题。在上面的函数中，我们使用了当今所有浏览器都支持的 window 全局对象，并删除了存储在其中的对象和存储的键值。在这里我们检查我们是否已经将密钥存储在本地存储中，如果是，我们将设置我们的本地状态，如果我们没有此信息，我们将返回 void。使用此功能，我们将知道我们是否有可用的 API，如果没有，我们将简单地记录消息。
react-native-web3js-example:[OLD]使用web3js设置Expo选项卡模板
05-18
React Native Web3.js示例 有关如何使用Expo工具链运行web3js的示例。 目前，除了能够导入web3并显示链接页面上可用的帐户外，没有什么其他功能了。 要知道 它使用Web3的纯JavaScript实现，请参阅services/web3/VERSION 。 WEB3需要BTOA方法可以全局，我添加了实施global.js ，并在顶部导入App.js 。 也需要bn.js和indexof 。
react-bootstrap-with-web3js:这是对react-bootstrap软件包的修改，该软件包将Web3.js API集成到每个组件中
05-02
React-Bootstrap 使用构建组件。 在积极开发中-API将会改变。 查看和以了解在何处可以提供帮助。 在1.0.0发行版之前，弃用或重大更改将导致次要版本颠簸。 文件 请参阅带有实时可编辑示例的。 相关模块 –与集成 - React Bootstrap的版本，其中每个组件都有映射到bootstrap实用程序类的额外道具。 例如， pullRight将class pull-right到组件。 很棒的React Bootstrap组件-其他组件，例如画布导航栏，开关和滑块。 本地设置 在这里，Yarn是我们选择的软件包管理器。 如果尚未安装，请查看此处的安装说明。 之后，您可以运行yarn run bootstrap来安装所有需要的依赖项。 从那里您可以： 使用yarn test运行一次yarn test （或使用yarn run tdd在监视模式下运行它们）。
如何配置web3.js和连接MetaMask
weixin_59424057的博客
03-08 4212
1、先搭建项目的目录结构： assets//用来放一些图片什么的 components //自定义的组件、 config//配置文件包括常量字符串常量等、 context //封装的上下文、 hooks //定义采用hook封装的逻辑、 state//状态管理、 language//可以切换的语言包、 utils//工具库、 views//页面组件 2、在utils文件下创建web3.ts文件： import { ethers } from 'ethers' import { Ext
React学习笔记之条件渲染（一）
01-19
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function ...
React学习笔记之高阶组件应用
01-19
是什么 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。...class Hello extends React.Component { // } 如何实现 属性代理 下面的例子是最简单的一个实现 function hoc(Impo
react.js.md react学习笔记
03-21
react.js.md react学习笔记
React学习笔记（参考官方文档总结）
09-19
React 学习笔记 React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发，用于构建 Instagram 的网站。React 主要用于构建 UI，许多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑...
使用React+Three.js 封装一个三维地球
热门推荐
前端-后端学习之路
09-23 1万+
良久没有写过博客了，最近忙的焦头烂额，忽略了博客，罪过罪过。今天补充一篇，前一段时间研究过的技术，使用React+Three.js 封装一个三维地球，支持鼠标的交互行为。其实也实现了对有坐标的json数据展示在地球上的功能，以后会有补充。github仓库地址: https://github.com/zrysmt/react-threejs-app 整体做完之后的效果图： 废话少说，直接上环
webpack3.x+react+react-redux完整实例搭建过程
aiwo035的博客
04-28 3210
1.本次搭建过程起初想升级到最新的webpack4.x 发现在extract-text-webpack-plugin 样式打包组件有比较多的问题改成了webpack3.x，于以前老的还是区别很大安装：cnpm install --save-dev webpack             cnpm install --save-dev webpack-dev-server在配置过程需要一些组件和工具...
以太坊DAPP[2]-×××-react框架与web3实例
weixin_34358092的博客
12-13 739
安装Reactcreate-react-app 可以为我们新建一个模版react项目。让我们非常方便的使用到React。web3实例新建 src/web3.js在这里使用到了浏览器中内置的provider，在这里默认用户安装了metamask，因为metamask会内置web3j和provider到浏览器中。但是metamask内置的web3j库是0.20版本的。我们希望使用...
web3-react常用功能方法封装
【03】的博客
07-19 6144
web3-react常用功能封装分享 使用web3-react import {Web3ReactProvider} from '@web3-react/core' function getLibrary(provider) { const library = new Web3Provider(provider) library.pollingInterval = 8000 return library } // render <Web3ReactProvider getLibrar
create-react-app 脚手架 TS类型引入 web3.js报错
Huang58_com的博客
06-28 510
crate-react-app的 TS 引入web3报错
主流框架选择：React、Angular、Vue的详细比较
一些平时在开发过程中遇到的常见问题，分享给大家
06-17 712
主流框架选择：React、Angular、Vue的详细比较
React 中的 ErrorBoundary
hawk2014bj的博客
06-18 326
React 框架中通过 getDerivedStateFromError 方法进行异常处理，项目开发可以自定义一个类组件并实现该方法进行组件异常处理。
react使用OpenLayers实现类似船某网在地图放大时展示具体船舶符号缩小时显示聚合小点效果
最新发布
左直拳的马桶_日用桶
06-19 129
如图所示，地图缩小（即比例尺放大）时，显示聚合小绿点；
黑马react学习笔记
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值