React笔记（腾讯课堂-最受欢迎的react框架【爱前端】）（react基础）

最新推荐文章于 2024-07-25 10:34:29 发布
最新推荐文章于 2024-07-25 10:34:29 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miemiewan/article/details/79405286
版权

1.Hello World

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app_wrap"></div>
	<script type="text/javascript" src="dist/all.js"></script>
</body>
</html>

main.js

import React from "react";
import {render} from "react-dom";
import App from "./App.js";
render(
    <App></App>,
    document.getElementById("app_wrap")
)

App.js

import React from "react";
class App extends React.Component{
    render() {
        return <h1>hello</h1>
    }
}
export default App;


2.函数、数组、样式

main.js

import React from "react";
import {render} from "react-dom";
import App from "./App.js";

//ES6形式定义组件的调用
render(
    <App date={new Date()}></App>,
    document.getElementById("app_wrap")
);

App.js

import React from "react";
//ES6形式定义组件
class App extends React.Component{
    //类中定义的函数
    haha(lanmu) {
        if(lanmu="篮球") {
            return (
                <ul>
                    <li>乔丹</li>
                    <li>科比</li>
                    <li>沃尔</li>
                </ul>
            );
        } else if(lanmu="足球") {
            return (
                <ul>
                    <li>djfh</li>
                    <li>dsfs</li>
                    <li>fhyg</li>
                </ul>
            );
        }
    };

    render() {
        //render中定义的函数
        let xixi = () => {
            return(
                <div>
                    <h1>我是render中定义的函数:1+1={1+1}</h1>
                </div>
            );
        }
        //设置样式:方法二
        let mystyle = {
            "width":"600px",
            "height":20+200+"px",
            "backgroundColor":"gray",
            "margin":"10px auto"
        }
        //数组:要求有key属性，属性值不能重复
        let domarr = [
            <h3 key="1">数组元素1</h3>,
            <h3 key="2">数组元素2</h3>,
            <h3 key="3">数组元素3</h3>
        ];

        let arr = ["白板","妖姬","二手"].map((item,index)=>{
            return <li key={index}>{item}</li>
        });

        return (
            <div>
                <h1>hello</h1>
                <h2>北京时间：{this.props.date.toLocaleDateString()}</h2>

                {/*调用类中的函数:加this*/}
                {this.haha("篮球")}

                {/*调用render中的函数*/}
                {xixi()}

                {/*设置样式:方法一*/}
                <div style={{"width":"400px","height":20+200+"px","backgroundColor":"yellow","margin":"10px auto"}}></div>

                {/*设置样式:方法二*/}
                <div style={mystyle}></div>

                {/*react数组（含有DOM）自动展开*/}
                <div>{domarr}</div>
                <div>{arr}</div>
    
            </div>
        );
    }
} 
export default App;

3.react的数据传递：state:自治的不涉及传值，props:父组件数据传递给子组件，context：祖先组件数据传递给后代组件

只有这三兄弟才会引发virtual DOM 的改变，从而改变DOM.

A.state：改变内部的值

show.js

import React from "react";
import {render} from "react-dom";
//连接State.js(状态)
import State from "./State.js";
render(
    <State />,
    document.getElementById("state")
)

state.js

import React from "react";
class State extends React.Component{
    //构造函数:初始化状态
    constructor() {
        super();//要求调用super
        this.state = {//定义state
            a:100
        }
    }

    add() {
        this.setState({//改变state。改变a的值，只能用this.setState
            a: this.state.a + 1 //不能写成++
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.a}{/* 使用state */}</p>
                <p><input type="button" value="点击" onClick={(this.add).bind(this)} /></p>
            </div>
        )
    }
}

export default State;

B.props:父组件给子组件传递数据

安装prop-types:cnpm install --save-dev prop-types

show.js

import React from "react";
import {render} from "react-dom";
//连接Props.js（父组件数据传递给子组件）import Props from "./Props.js";
render( 
    <Props />, 
    document.getElementById("props")
)

props.js 
import React from "react";
import Props2 from "./Props2.js";
class Props extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <Props2 name="旺旺" num={88} />
            </div>
        );
    }
}

export default Props;

props2.js

import React from "react";
//引入PropTypes验证props的有效性
import {PropTypes} from "prop-types";

class Props2 extends React.Component{
    constructor(param) {
        super();
        // alert(param.name);//构造函数中的参数param.name传入的是this.props.name

        this.state = {
            num:param.num //将param.name的值传给this.state.name,所以最终是将this.props.name值传给this.state.name
        }
    }

    render() {
        return (
            <div>
                <h1>复合组件：我是{this.props.name}</h1>{/* this.props是固定的，调用时属性为name，打印出name的属性值 */}
                {/* props只能打印不能更改，数据是单向的 */}
                {/* state能改变数据 */}
                
                <h1>this.props.num为：{this.props.num}</h1>
                <h1>this.state.num为：{this.state.num}</h1>{/* 调用this.state.num，值与上方相同 */}
                
                <input type="button" value="num+1" onClick={()=>{this.setState({num:this.state.num + 1})}}/>
                {/* 点击后this.state.num改变，this.props.num不变 */}
            </div>
        );
    }
}

//组件传入的参数验证:当调用时没传入或传错类型name和num值时报错
//类名.propTypes
Props2.propTypes = {
    name:PropTypes.string.isRequired,
    num:PropTypes.number.isRequired
}


export default Props2;

C.子组件改变父组件的数据:

用奇淫技巧：父组件设置setState函数传递给子组件，子组件调用该函数并改变其值，使得父组件改变state从而改变数据

show.js

//连接PropsReverse.js 子组件改变父组件数据（后期用redux代替）
import PropsReverse from "./PropsReverse.js";
render(
    <PropsReverse />,
    document.getElementById("propsReverse")
)

PropsReverse.js

//子组件改变父组件数据（后期用redux代替）
import React from "react";
import PropsReverse2 from "./PropsReverse2.js";

class PropsReverse extends React.Component{
    constructor() {
        super();
        this.state={
            a:1
        }
    }

    setA(number) {
        this.setState({'a':number});
    }
    
    render() {
        return (
            <div>
                <h1>我是PropsReverse父组件，我有一个a状态：{this.state.a}</h1>
                <PropsReverse2 setA={(this.setA).bind(this)} a={this.state.a} />
            </div>
        );
    }
}
export default PropsReverse;

PropsReverse2.js

import React from "react";

class PropsReverse2 extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <p>子组件收到父组件数据：{this.props.a}</p>
                <input type="button" value="子更改父数据" onClick={()=>{this.props.setA(this.props.a+1)}} />
            </div>
        );
    }
}

export default PropsReverse2;

D.context:可跨级传递数据，祖先的数据可传递给后代

改变爷爷数据值时，孙子接受爷爷的数据值也跟着改变

show.js

import React from "react";
import {render} from "react-dom";

//连接Yeye.js
import Yeye from "./Yeye.js";
render(
    <Yeye />,
    document.getElementById("yeye")
)

Yeye.js

import React from "react";
import Baba from "./Baba.js";
import {PropTypes} from "prop-types";

class Yeye extends React.Component{
    constructor() {
        super();
        this.state = {
            a:10
        }
    }

    addA() {
        this.setState({
            a: this.state.a+1
        })
    }

    render() {
        return (
            <div>
                <h1>我是爷爷{this.state.a}</h1>
                <input type="button" value="改变爷爷数据值" onClick={(this.addA).bind(this)} />
                {/* 改变爷爷数据值时，孙子接受爷爷的数据值也跟着改变 */}
                <Baba /> 
            </div>
        );
    }

    //获取家族共享的数据，并设置其值
    getChildContext() {
        return {
            a:this.state.a
        }
    }
}
//家族共享数据的类型和要求
Yeye.childContextTypes = {
    a:PropTypes.number.isRequired
}

export default Yeye;

Baba.js

import React from "react";
import Sunzi from "./Sunzi.js";

//引入PropTypes验证props的有效性
// import {PropTypes} from "prop-types";

class Baba extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <h1>我是爸爸</h1>
                <Sunzi />
            </div>
        );
    }
}


export default Baba;

Sunzi.js

import React from "react";
import {PropTypes} from "prop-types";


class Sunzi extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <h1>我是孙子</h1>
                <p>通过context取得爷爷是数据：{this.context.a}</p>
            </div>
        );
    }
}
//获取家族共享数据      
Sunzi.contextTypes = {
    a:PropTypes.number
}
export default Sunzi;

E.context:后代组件改变祖先组件数据：也是用奇淫技巧：共享祖先包含setState函数，后代组件调用该函数改值

Yeye.js

import React from "react";
import Baba from "./Baba.js";
import {PropTypes} from "prop-types";

class Yeye extends React.Component{
    constructor() {
        super();
        this.state = {
            a:10
        }
    }

    
    addA() {
        this.setState({
            a: this.state.a+1
        })
    }

    render() {
        return (
            <div>
                <h1>我是爷爷{this.state.a}</h1>
                <input type="button" value="改变爷爷数据值" onClick={(this.addA).bind(this)} />
                {/* addA自己使用，改变爷爷数据值时，孙子接受爷爷的数据值也跟着改变 */}
                <Baba /> 
            </div>
        );
    }

    //获取家族共享的数据，并设置其值
    getChildContext() {
        return {
            a:this.state.a,
            addA:(this.addA).bind(this) //将addA共享给后代
        }
    }
}
//家族共享数据的类型和要求
Yeye.childContextTypes = {
    a:PropTypes.number.isRequired,
    addA:PropTypes.func.isRequired
}

export default Yeye;

Sunzi.js

import React from "react";
import {PropTypes} from "prop-types";


class Sunzi extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <h1>我是孙子</h1>
                <p>通过context取得爷爷是数据：{this.context.a}</p>
                <input type="button" value="改变家族数据的值" onClick={this.context.addA} />
            </div>
        );
    }
}
//获取家族共享数据                                                                                                                                                                                 
Sunzi.contextTypes = {
    a:PropTypes.number,
    addA:PropTypes.func
}
export default Sunzi;

4.实时表单输出

Realoutput.js

import React from "react";
class Realoutput extends React.Component{
    constructor(props) {
        super();
        this.state = {
            txt:"hello"
        }
    }

    change(event) {
        this.setState({
            txt:event.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" onInput={(this.change).bind(this)} />
                <p>{this.state.txt}</p>
            </div>
        );
    }
}
export default Realoutput;

5.ref:DOM钩子

Ref.js

//ref:DOM钩子
import React from "react";
class Ref extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <input type="button" value="盒子变色" onClick={()=>this.refs.mybox.style.backgroundColor="yellow"} />
                <div className="box" ref="mybox" style={{"width":200,"height":200,"backgroundColor":"red"}}></div>
            </div> 
        );
    }
}
export default Ref;


MiemieWan
关注
专栏目录
React 框架
敲代码的小李同学的博客
07-02 3万+
React 框架学习
95页字节跳动内部前端学习笔记在互联网上火了，完整版开放下载
weixin_56134381的博客
06-22 6400
字节跳动内部前端学习笔记+前端所有方向的学习路线，你们要的知识体系在这，千万别做了无用功。建议收藏
React基础
exialym的博客
10-22 2028
HTML模板 React主要是两个库： react.js是核心库 react-dom.js 是提供与 DOM 相关的功能 还有一个Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，JSX是可以将HTML直接写在JS里的语言，这一步通常不在浏览器端进行，而是通过babel配合React的babel插件预先转码好。 $ babel src --out-dir b
React框架：深度解析与应用场景
最新发布
AOMGyz的博客
07-25 1680
而React在JavaScript内存中维护了一个虚拟的DOM树，当页面状态改变时，React会先更新虚拟DOM树，然后与真实DOM树进行差异对比，只将变化的部分应用到真实DOM上，从而实现了高效的页面渲染。React Native不仅支持原生的UI组件和API，还提供了丰富的第三方库和工具链，使得移动应用开发变得更加简单和灵活。综上所述，React框架以其独特的组件化、虚拟DOM和单向数据流等核心特性，以及高性能、可复用性和强大的社区支持等优势，成为了前端开发领域的佼佼者。1.单页面应用（SPA）
React框架课程套装大合集从小白到大神
xl56342141的博客
12-27 329
课程目录： 1.JavaScript基础 2.ECMAScript 新功能 3.React 基础 4.React 路由 5React Native基础知识 6.React Native进阶 7.R React Native高级 8. React.js React 基础 ECMAScript 2105(es6) ECMAScript6编程艺术（27章） React16(1).4 开发简书项目 从...
前端笔记列表
liNewman的博客
01-30 296
前端笔记列表 下载 我的博客，欢迎交流！ 我的CSDN博客，欢迎交流！ 微信小程序专栏 前端笔记专栏 微信小程序实现部分高德地图功能的DEMO下载 微信小程序实现MUI的部分效果的DEMO下载 微信小程序实现MUI的GIT项目地址 微信小程序实例列表 前端笔记列表 游戏列表 基础...
小滴课堂面试专题课程完整笔记1
08-03
- Vue、React是当前流行的前端框架，SpringBoot和SpringCloud是后端开发的常用工具，Dubbo是阿里巴巴开源的分布式服务框架，这些技术在面试中经常被提及。 7. 职业规划 - 从P5到P6，再到T3-2的晋升路径，反映了...
字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载
wyy901002的博客
07-15 856
前端工程师学习路线（给大家整理了HTML，CSS，JavaScript等等全套学习资料） 一、入门前端三剑客 1、HTML html 学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在网上找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行。 看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下阮..
非科班出身拿下字节跳动前端offer，我有一份50000字面试宝典分享给你！
pig_html的博客
03-22 4148
个人经历 本人211学校，回想我大一的时候，读的是机电工程，因为对计算机专业好就业比较看重，后来在大一下的时候开始了自己双学位之路，开始了学计算机专业，从此开始了科班生的生涯。接触前端也大概是在大一下学期，在一个叫腾讯课堂的地方偶然发现了一套 JS 的视频，看着感觉不错，想深入这个领域，但后来发现越往后面学越需要一些计算机科班的专业基础，于是我当时果断转到了计算机。因此这一步选择算得上偶然，也是一个必然。 大二上学校的课程压力比较大，不温不火地学了一个学期，中途有过做全栈的想法，报了个 Python Web
《Angular4从入门到实战》学习笔记（图文）
weixin_43836920的博客
11-28 337
终于又找到组织了！没想到十几年过去了，CSDN还是那么的坚挺！欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowcha...
React框架
qyjandroid的专栏
03-14 738
http://reactjs.cn/react/docs/getting-started.html JSFiddle 开始学习 React 最简单的方式是使用如下JSFiddle的 Hello World例子： React JSFiddleReact JSFiddle without JSX 初学者教程包 (Starter Kit) 开始先下载初学者教程包
react 基础
weixin_38822843的博客
11-08 1892
什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用 目录 什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用
react基础
Pandora_417的博客
11-26 494
setState 不可变值 （不能提前设置this.state.list = []这样子，必须使用setState。会生成新的值 但不会改变旧的值，数组可使用slice（），对象可使用Object.assign({}, obj1,obj2)） 可能是异步更新 setState是异步的， 但在setTimeout中是同步的 在自定义的dom事件中是同步的 （自定义的dom事件是需要销毁的，vue在beforeDestroy（）周期中，而react在componentWillUNMount中。） 可能会被合并
快速掌握React基础：create-react-app入门与核心组件
React基础学习包括理解组件化开发思想、熟练使用`create-react-app`进行项目初始化、掌握核心库（React、react-dom）的工作原理，以及熟悉项目生命周期方法和状态管理。随着对这些内容的深入，你将能够构建出高效且...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值