react基础知识总结

最新推荐文章于 2024-01-31 22:52:03 发布
最新推荐文章于 2024-01-31 22:52:03 发布
阅读量367 收藏 2
点赞数 1
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gklcsdn/article/details/112872318
版权

文章目录

1. react入门

1.1 介绍描述

  1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)

  2. 由Facebook开源

1.2 React的特点

  1. 声明式编码 区别于命令式编程,它的特点就是我告诉计算机做什么,但是没有告诉你怎么做.

  2. 组件化编码

  3. React Native 编写原生应用

  4. 高效（优秀的Diffing算法）

1.3 React高效的原因

  1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

  2. DOM Diff算法, 最小化页面重绘。

1.4 相关js库

  1. react.js：React核心库。

  2. react-dom.js：提供操作DOM的react扩展库。

  3. babel.min.js：将jsx语法代码转换为js语法代码

1.5 虚拟dom与真实dom
// jsx 创建虚拟dom
const VDOM = React.createElement('xx',{id:'xx'},'xx')

  1. 虚拟DOM对象最终都会被React转换为真实的DOM

  2. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

1.6 jsx ( JavaScript XML)

  1. react定义的一种类似于XML的JS扩展语法

  2. 作用: 用来简化创建虚拟DOM

    1. 写法：var ele =

      Hello JSX!

    2. 注意1：它不是字符串, 也不是HTML/XML标签

    3. 注意2：它最终产生的就是一个JS对象

  3. 基本语法规则

    1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

    2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

1.7 渲染虚拟dom
  1. 语法
ReactDOM.render(
    <App />,
  document.getElementById('root')
);

  1. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

  2. 参数说明

    1. 参数一: 纯js或jsx创建的虚拟dom对象

    2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

1.8 案例

需求: 动态展示如下列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7cRBcgRz-1611125255462)(https://s3.ax1x.com/2021/01/19/s2z2RO.png)]

import React, {Component} from 'react';

class App extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            allContent: ['vue', 'react', 'angular']
        }
    }
    render() {
        return (
            <div>
              <h1>前端js框架列表</h1>
                <ul>
                    {
                        this.state.allContent.map((item, index) => (
                            <li key={index}> {item} </li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

export default App;

2. react 面向组件编程

2.1 组件三大核心属性 state props refs
1. state

  1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

  2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

注意：

​ 1. 组件中render方法中的this为组件实例对象

  1. 组件自定义的方法中this为undefined，如何解决？

    a) 强制绑定this: 通过函数对象的bind()

    b) 箭头函数

  2. 状态数据，不能直接修改或更新

案例：

需求*😗 定义一个展示天气信息的组件

1. 默认展示天气炎热 或 凉爽

2. 点击文字切换天气

import React, {Component} from 'react';

class App extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            isHot: false
        }
    }
    handleClick = () =>{
        this.setState({
            isHot: !this.state.isHot
        })

    };
    render() {
        return (
            <div onClick={this.handleClick}>
                {this.state.isHot ? 'cold':'hot'}
            </div>
        );
    }
}

export default App;
2. props

作用：用于父子组件传值（父组件传值给子组件）

案例：

1. 姓名必须指定，且为字符串类型；

2. 性别为字符串类型，如果性别没有指定，默认为男

3. 年龄为字符串类型，且为数字类型，默认值为1**8

sROJbt.png

父组件

import React, {Component} from 'react';
import Person from "./person/Person";

class App extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            p1:{
                name: 'Tom',
                age: 18,
                sex: 'male'
            }
        }
    }

    render() {
        return (
            <div>
                <Person {...this.state.p1}></Person>
            </div>
        );
    }
}

export default App;

子组件

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Person extends Component {
    // 设置默认值
    static defaultProps = {
        sex: 'male',
        age: 18
    };
    // 设置值的类型 和限制(PropTypes验证器)
    static propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
    };
    render() {
        console.log(this.props);
        return (
            <div>
                <ul>
                    {
                        Object.keys(this.props).map((item, index) =>(
                            <li key={index}> {item} : {this.props[item]}</li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

export default Person;
3. refs

作用： 组件内的标签通过ref来标识自己

需求: 自定义组件, 功能说明如下:

1. 点击按钮, 提示第一个输入框中的值

2. 当第2个输入框失去焦点时, 提示这个输入框中的值

sRO02Q.png

import React, {Component} from 'react';

class Person extends Component {
    handleClick = () =>{
      console.log(this.input1.value)
    };
    handleBlur = (ev)=>{
        console.log(ev.target.value)
    }
    render() {

        return (
            <div>
                回调函数： 参数为标签名，返回自定义名字作为获取的对象
                <input type="text" ref={input=>this.input1=input}/>
                <button onClick={this.handleClick}>click</button>
                <input type="text" onBlur={this.handleBlur}/>
            </div>
        );
    }
}

export default Person;
2.2 事件处理

  1. 通过onXxx属性指定事件处理函数(注意大小写)

    1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件

    2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

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

2.3 表单数据收集

受控组件： 表单数据能自动收集成状态

非受控组件： 需要时手动获取

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kb2Dl1eg-1611125255472)(https://s3.ax1x.com/2021/01/20/sRjefO.png)]

name 受控

pwd 非受控

import React, {Component} from 'react';

class Person extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            pwd:''
        }
    }
    handleClick = (ev)  =>{
        ev.preventDefault();
        const {pwd} = this.state;
        console.log({name: this.name.value, pwd})
    };
    handleInput = (ev) =>{
      this.setState({
          pwd: ev.target.value
      })
    };
    render() {
        return (
            <div>
                <form action="">
                    name: <input type="text" ref={input=>this.name=input}/> <br/>
                    pwd: <input type="text" value={this.state.pwd} onInput={this.handleInput}/> <br/>
                    <button onClick={this.handleClick}>login</button>
                </form>
            </div>
        );
    }
}

export default Person;
2.4 组件生命周期

https://blog.csdn.net/gklcsdn/article/details/109592711

3. 脚手架

  1. 脚手架: 快速创建一个模板项目

    1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）
    2. 下载好了所有相关的依赖
    3. 可以直接运行一个简单效果

  2. react提供了一个用于创建react项目的脚手架库: create-react-app

  3. 项目的整体技术架构为: react + webpack + es6 + eslint

  4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3.1 组件化编码流程

  1. 拆分组件: 拆分界面,抽取组件

  2. 实现静态组件: 使用组件实现静态页面效果

  3. 实现动态组件

    3.1 动态显示初始化数据

    3.1.1 数据类型

    3.1.2 数据名称

    3.1.2 保存在哪个组件?

    3.2 交互(从绑定事件监听开始)

4. 路由

4.1 SPA

  1. 单页Web应用（single page web application，SPA）。

  2. 整个应用只有一个完整的页面。

  3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。

  4. 数据都需要通过ajax请求获取, 并在前端异步展现。

4.2 路由的理解

一个路由就是一个映射关系（key:value）

后台路由： 用来处理客户端提交的请求并返回相应的数据
前台路由：不同路由对应不同的组件

https://blog.csdn.net/gklcsdn/article/details/109596166

5. redux

3.1.1 数据类型

3.1.2 数据名称

3.1.2 保存在哪个组件?

3.2 交互(从绑定事件监听开始)

4. 路由

4.1 SPA

  1. 单页Web应用（single page web application，SPA）。

  2. 整个应用只有一个完整的页面。

  3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。

  4. 数据都需要通过ajax请求获取, 并在前端异步展现。

4.2 路由的理解

一个路由就是一个映射关系（key:value）

后台路由： 用来处理客户端提交的请求并返回相应的数据
前台路由：不同路由对应不同的组件

https://blog.csdn.net/gklcsdn/article/details/109596166

5. redux

https://blog.csdn.net/gklcsdn/article/details/109713566

guokanglun
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React教程（详细版）
m0_54853146的博客
03-08 2万+
一、简介（背景） 本文篇幅较多，建议耐心看完，我相信多少会对你有所帮助! 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生js没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在R
react的超详细讲解
叶子先生的博客
08-07 1097
create-react-app 项目目录 在HTML中使用react 1 2 3基础 React的注意事项 模拟的React 和 render React组件 函数组件 类组件 React 的数据源(props(外部传入，不可修改) ,state(内部自带，可修改)) React 生命周期(钩子函数) React Event 中的this问题 prop-types 受控与非受控组件 React 是单向数据流 4 超详细讲解 React高性能的体现：虚拟DOM React Fiber 编写第一个react应
React 基础知识点总结
02-21
React 基础知识点总结
react知识点汇总.xmind
04-16
react知识点
React详解（包含新旧版本）
最新发布
m0_55557411的博客
01-31 1160
React详解（包含新旧版本）最适合初学者，每个知识点包含图解，代码
react基础知识总结.pdf
03-20
react基础知识总结.pdf
react及react生态知识总结
10-18
对react，react全家桶，react native等的知识点进行汇总
liujie2019#Blog#React知识点总结1
07-25
2. 使用 PropTypes 进行类型检查 4. dangerouslySetInnerHTML函数 6. 事件处理
React 入门（超详细）
热门推荐
weixin_62897746的博客
03-23 1万+
1. React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 2. React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 3. React 是用于动态构建用户界面的
React 详解
共勉
08-19 909
React是用于构建用户界面的JavaScript库， [1] 起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。
React学习基本语法
02-20
这是我学习 React 写的第一个程序，也是React的最基本的语法，上传到这里，和大家交流学习
react全讲解
贝贝小菜鸟的博客
02-04 5325
1.1起步 创建项目:npx create-react-app my-app 打开项目: cd my-app 启动项目:npm start 暴露配置项:npm run eject 1.2文件结构 其中:README.md–文档 public–存放静态资源 src–源码 App.js–根组件 index.css–全局样式 index.js–入口文件 package.json–npm 依赖 config里面的webpack.config.js,可以看出能够支持ts、sass及css模块化 entry:
React 路由详解(超详细详解)
shuux666的博客
03-08 3333
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
React教程（由浅到深）
web$-小白
07-02 3793
1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>`接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
React的超详细讲解
xuwei1215225的博客
05-13 6811
React React的重点 webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 其它相似打包工具还有rollup.js 、 parcel、...
React 知识点详解（全）文档
sea9528的博客
06-08 599
React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友） 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 Angular1 2009 年 谷歌 MVC 不支持 组件化开发 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来
React基础(超级详细，有案例)
weixin_43604021的博客
08-09 1619
React组件 Diffing算法等基础知识和用法
React基础知识梳理（含案例和讲解）
tuzi007a的博客
07-24 1655
React基础知识梳理（含案例和讲解） 1，react 是什么？ React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。（官方明确说react不是框架，被人称为框架，可能是他真的足够强大吧。。） 声明式：为状态设计UI 组件化：就是一个个“零件”（即组件）， 用这些零件拼凑成需要的“成品”（即UI） 随时随地： 不管用什么技术栈，随时随地都可以用react编写。 点击进入 ???? React中文官方文档 2，react能做啥？ 做页面的UI交互。 3，怎么用react？
react相关面试题
08-29
总结起来，React相关的面试题主要涉及React的基础知识、组件使用、状态管理、路由导航以及与前端开发相关的技术。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值