reactjs学习手记（1）

最新推荐文章于 2023-08-05 16:26:50 发布
原创 最新推荐文章于 2023-08-05 16:26:50 发布 · 717 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#应用

本文详细介绍React框架的核心概念，包括React的开发背景、组件设计原则及其优势，并深入探讨JSX语法特性，组件生命周期管理等关键知识点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

react课程概要

什么是React

开发背景

facebook推出的，需要解决的问题
    构建数据不断变化的大型应用

    数据变化-->大量dom操作
            -->逻辑变化

简单
声明式
React的核心是组建，组建的设计目的是提高代码复用率，降低测试难度和代码复杂度
    提高代码复用率：组建将数据和逻辑封装，类似面向对象中的类。
    降低测试难度：组建搞内聚低耦合，很容易对单个组建进行测试。
    降低代码的复杂度：直观的语法，提高代码的可阅读性。

React Native 构件移动端应用

React开发环境搭建

下载Facebook官方的基础代码

https://github.com/facebook/react/releases

常用的编辑器及插件的配置

CodeKit、Sublime Text 2/3、、、
推荐Sublime Text 3

插件：Emmet、HTML-CSS-JS Prettify，Spacegray模板

环境：nodejs

Emmet语法介绍

子代： > 
    div>ul>li
兄弟： +
    div+p+bq
父代： ^
    div+div>p>span+em^bq
重复： *
    ul>li*5
成组： ()
    (div>dl>(dt+dd)*3)+footer>p
id  ： #
    div#header+div.page
class：.

属性： []
    div[title="Hello" colspan="3"]

demo 
```
    (div+p#test1>span.test2.test3)*5+p[name="hello"]>div.test4^a*5
```

编写第一个React程序

React程序结构

HTML+CSS+(JS+JSX)
html:5

修改代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>

    <script src="./react.js"></script>
    <script src="./JSXTransformer.js"></script>
    <script type="text/jsx">
        var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
            render: function(){
                return <p>Hello World</p>
            }
        });

        React.render(<Hello></Hello>,document.body);


    </script>
</body>
</html>
#注意
元素名字首字母必须大写，否则会jsx当作html自带元素

查看改动效果

用浏览器打开即可

#最新版没有jsx?

jsx语法及特点介绍 - 课程概要

什么是jsx

jsx的发展历程

JSX = JavaScript XML
此JSX非彼JSX
基于ECMAScript的一种新特性
一种定义带属性树结构的语法
JSX不是XML或HTML 也不是一种限制
使用react.js不必须使用jsx

优点

类XML语法，容易接受
增强JS语义
结构清晰
抽象程度高（屏蔽掉所有的手动DOM操作）core
代码模块化

如何使用jsx

jsx语法

本质上是js，但是可以直接写html标签
首字母大小写
嵌套
求值表达式（js本身的特性）
驼峰命名
html-->htmlFor和class-->className

注释

// 或/**/

css

var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
            render: function(){
                return <p>Hello World</p>
            }
        });

React.render(<Hello></Hello>,document.body);
var style ={
    font-color:'red',
    border:1px
}

<div style={style}>     //嵌套Hello嵌套到了一个div中
<Hello>
</Hello>
</div>

嵌套

条件判断的四种写法

1 三元表达式
var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    render: function(){
        return <p>Hello {this.props.name ? this.props.name : "World"}</p>
    }
});
2 直接使用变量
var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    getName: function(){
        if(this.props.name)
            return this.props.name
        else
            return "world";
    }
    render: function(){
        var name = this.getName();
        return <p>Hello {name}</p>
    }
});
3 直接使用函数调用
var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    getName: function(){
        if(this.props.name)
            return this.props.name
        else
            return "world";
    }
    render: function(){
        return <p>Hello {this.getName()}</p>
    }
});
4 或运算符
var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    render: function(){
        return <p>Hello {this.props.name || "World"}</p>
    }
});

万能的函数表达式

var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    render: function(){
        return <p>Hello {
            (function(obj){
                if(obj.props.name)
                    return obj.props.name
                else
                    return "World"
            })(this)
        }</p>
    }
});

jsx语法实例

非dom属性介绍

为什么要有非DOM属性

dangerouslySetInnerHTML、ref、key
dangerouslySetInnerHTML：在JSX中直接插入HTML代码
ref：父组建引用子组建
key：提高渲染性能
react diff算法流程图

react diff
key标识每个节点
启示：类似的节点写成一个的组件
使用类似列表展示元素时元素尽量加上唯一的key，不同组件之间的key可以一样

如何使用非DOM属性

<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
    var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
        render: function(){
            return <p>Hello World</p>
        }
    });

    var style ={
        color:'red',
        border:'1px #000 solid'
    };

    var rawHTML = {
        __html: "<h1>I'm inner HTML</h1>"
    };
    React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>/*<div>这里不能有文字？</div>*/,document.body);

</script>

如何使用ref

<script src="./react.js"></script>
    <script src="./JSXTransformer.js"></script>
    <script type="text/jsx">
        var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
        this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM
            render: function(){
                return <p ref="childp">Hello World</p>
            }
        });

        var style ={
            color:'red',
            border:'1px #000 solid'
        };

        var rawHTML = {
            __html: "<h1>I'm inner HTML</h1>"
        };
        React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}></div>/*<div>这里不能有文字？</div>*/,document.body);

    </script>

key

<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
    var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    //this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM
        render: function(){
            return <ul>
            <li key="1">1</li>      //注意key="1",需要双引号
            <li key="2">2</li>
            <li key="3">3</li>
            </ul>
        }
    });

    var style ={
        color:'red',
        border:'1px #000 solid'
    };

    var rawHTML = {
        __html: "<h1>I'm inner HTML</h1>"
    };
    React.render(<div style={style}><Hello></Hello></div>,document.body);

</script>

jsx解释器架构介绍

阅读源代码

从执行顺序入手
适当忽略细节
重视烂笔头
反复阅读

理解解释器架构

jiagou

组件生命周期详解

什么是生命周期

组件的生命周期

组件本质上是状态机，输入确定，输出一定确定。
状态发生转换时会出发不同的钩子函数，从而让开发者有机会做出响应
可以用事件的思路来理解状态

zujian

不同生命周期内可以自定义的函数

初始化

钩子函数
getDefaultProps //获取实例的默认属性组件的第一个实例装载之后才调用，第二个实例开始并不调用
getInitialState //获取实例的初始化状态
componentWillMount //组件即将被渲染到页面上
render //生成虚拟dom节点，由react渲染成真正的DOM节点
componentDidMount //组件真正装载之后调用，组件已经被渲染到了页面

运行中
componentWillReceivProps    //组件可能要接收到属性
shouldComponentUpdate       //组件接收到新属性，返回false则不会调用render函数（diff 算法）
componentWillUpdate         //在render调用之前调用
render                      //组件真正装载之后调用，组件已经被渲染到了页面
componentDidUpdate          //react渲染成真正的DOM节点之后调用
销毁
componentWillUnmount        //销毁操作之前调用

初始化阶段介绍

getDefaultProps

只调用一次，实例之间共享引用

getInitialState

初始化每个实例特有的状态

componentWillMount

render之前最后一次修改状态的机会

render

只能访问this.props和this.state,只有一个顶层组件，不允许修改状态和DOM输出

componentDidMount

成功render并渲染完成真实DOM之后触发，可以修改DOM

demo

调用顺序：
<script type="text/jsx">
    var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    //this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM
        getDefaultProps:function(){
            console.log('getDefaultProps,1');
            return null;
        },
        getInitialState: function(){
            console.log('getInitialState,2');
            return null;
        },
        componentWillMount: function(){
            console.log('componentWillMount,3');
        },
        render: function(){
            console.log('render,4');
            return <ul>
            <li key="1">1</li> 
            <li key="2">2</li>
            <li key="3">3</li>
            </ul>
        },
        componentDidMount:function(){
            console.log('componentDidMount,5');
        }
    });

    var style ={
        color:'red',
        border:'1px #000 solid'
    };

    var rawHTML = {
        __html: "<h1>I'm inner HTML</h1>"
    };
    React.render(<div style={style}><Hello></Hello></div>,document.body);

</script>
各函数用法：
<script type="text/jsx">
    var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
    //this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM
        getDefaultProps:function(){
            console.log('getDefaultProps,1');
            return {name:'Ray'};
        },
        getInitialState: function(){
            console.log('getInitialState,2');
            return {count:count++,
                    ready:false
            };
        },
        componentWillMount: function(){
            console.log('componentWillMount,3');
            this.setState({ready:true});
        },
        render: function(){
            console.log('render,4');
            return <p>Hello {this.props.name?this.props.name:"World"}<br/>{this.state.ready + " "} {this.state.count}</p>
        },
        componentDidMount:function(){
            console.log('componentDidMount,5');
            React.findDOMNode(this).innerText += ' well';

        }
    });

    var style ={
        color:'red',
        border:'1px #000 solid'
    };

    var count = 0;
    React.render(<div style={style}><Hello></Hello><br/><Hello></Hello><br/><Hello></Hello><br/><Hello></Hello><br/><Hello></Hello></div>,document.body);

</script>

运行中阶段介绍

componentWillReceiveProps

父组件修改属性触发，可以修改新属性、修改状态

shouldComponentUpdate

返回false会阻止render调用

componentWillUpdate

不能修改属性和状态

render

只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidUpdate

可以修改DOM

demo

<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script src="./jquery-3.1.1.min.js"></script>
<script type="text/jsx">
$(document).ready(
    function(){
        var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
        //this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM
            componentWillReceiveProps:function(newProps){
                // to do...
                console.log('componentWillReceiveProps,1');
                console.log(newProps);
            },
            shouldComponentUpdate: function(){
                console.log('shouldComponentUpdate,2');
                return true;    //true表示组建需要更新，必须返回一个值,如果返回false，则下面的几个方法不会调用
                //这个方法一般不用
            },
            componentWillUpdate: function(){
                // to do...
                console.log('componentWillUpdate,3');
                //这个方法一般也不用
            },
            render: function(){
                console.log('render,4');
                return <p>Hello {this.props.name?this.props.name:"World"}<br/></p>
            },
            componentDidUpdate:function(){
                //  to do...    
                console.log('componentDidUpdate,5');
                $(React.findDOMNode(this)).append("suprise!");             
            }
        });

        var World = React.createClass({
            getInitialState:function(){
                return {name:''};
            },
            handleChange:function(event){
                this.setState({name:event.target.value});
            },
            render:function(){
                return <div>
                    <Hello name={this.state.name}></Hello>
                    <br/>
                    <input type="text" onChange={this.handleChange} />
                </div>
            }
        });

        var style ={
            color:'red',
            border:'1px #000 solid'
        };

        var count = 0;
        React.render(<div style={style}><World></World></div>,document.body);
    }
);
</script>

销毁阶段介绍

componentWillUmount

在删除组件之前进行清理操作，比如计时器和事件监听

demo

<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script src="./jquery-3.1.1.min.js"></script>
<script type="text/jsx">
$(document).ready(
    function(){
        var Hello = React.createClass({     //注意，首字母必须大写，否则会jsx当作html自带元素
        //this.refs.childp.text        //不是真正的DOM节点(不能进行操作),而是react展示的DOM
            componentWillReceiveProps:function(newProps){
                // to do...
                console.log('componentWillReceiveProps,1');
                console.log(newProps);
            },
            shouldComponentUpdate: function(){
                console.log('shouldComponentUpdate,2');
                return true;    //true表示组建需要更新，必须返回一个值,如果返回false，则下面的几个方法不会调用
                //这个方法一般不用
            },
            componentWillUpdate: function(){
                // to do...
                console.log('componentWillUpdate,3');
                //这个方法一般也不用
            },
            render: function(){
                console.log('render,4');
                return <p>Hello {this.props.name?this.props.name:"World"}<br/></p>
            },
            componentDidUpdate:function(){
                //  to do...    
                console.log('componentDidUpdate,5');
                $(React.findDOMNode(this)).append("suprise!");             
            },
            componentWillUnmount:function(){
                console.log("BOOOOOOOOOOOOOOOOOOOM!");
            }
        });

        var World = React.createClass({
            getInitialState:function(){
                return {name:''};
            },
            handleChange:function(event){
                if(event.target.value == '321'){
                React.unmountComponentAtNode(document.getElementsByTagName("body")[0]);
                return;//没有return会继续调用render
                }
                //way 2：使用React.unmountComponentAtNode显式调用
                this.setState({name:event.target.value});
            },
            render:function(){
                if(this.state.name == '123'){
                    return <div>123</div>
                }
                //way 1:在render中直接返回性的div
                return <div>
                    <Hello name={this.state.name}></Hello>
                    <br/>
                    <input type="text" onChange={this.handleChange} />
                </div>
            }
        });

        var style ={
            color:'red',
            border:'1px #000 solid'
        };

        var count = 0;
        React.render(<div style={style}><World></World></div>,document.body);
    }
);
React.js 全面解析：从基础到实战案例
一杯梅子酱的博客
06-28 2214
React通过组件化和JSX简化了UI的开发复杂度，其强大的状态管理和生命周期机制为开发者提供了高度灵活的控制能力。通过学习和掌握上述基础知识，开发者能够构建功能丰富、高效且可维护的Web应用。随着React生态的不断壮大，如Redux进行状态管理，React Router进行路由控制，以及Next.js等服务端渲染技术的集成，React已成为现代前端开发不可或缺的一部分。关注！
【前端】深入浅出的React.js详解
最新发布
保持前进，即便速度慢，也不能停下脚步...
11-12 2671
React 是一个强大的库，用于构建用户界面。通过理解核心概念、新特性和最佳实践，开发者可以更高效地使用 React 构建高性能和响应式的应用。本文详细解读了最新的 React 官方文档，涵盖了组件、JSX、Props、State、生命周期方法、Hooks、Concurrent Mode 等内容，并提供了示例代码和最佳实践。
一看就懂的ReactJs入门教程-精华版
aa124413278的博客
05-08 3462
　　现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（VirtualDOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 Jav...
React.js 学习
ccirclee的博客
01-03 1305
当我们想点击一个按钮，然后更新一下点击数量，需要建立函数去更新count，还需要React render，这非常麻烦。使用数组存放数据，并且使用接受数据的那个值，使用spread operator去存放数据到数组中。2.需要触发函数，这个函数可以帮助传送数据到app.jsx中，props可以帮助传送数据。我们需要实现，当你的鼠标放在button上面的时候，他的颜色会从黑变成白色。可以通过设定变量，修改变量的值，然后使用ejs应用再html中。3.在app中加入传送数据的函数，并加上接收的函数。
reactJS入门学习
LiQiangQiangIT的博客
09-16 483
一、基础知识 1、var 定义的局部变脸可以衍生为全局变量，， 引入let 2、const 定义的变量不能被修该，相当于final 3、 includes 相当于contains,包含的意思 startsWith 是否以某个字符串开头 endsWith 是否已某个字符串结尾 4、let s = ;可以原样打印 5、箭头函数 5.1 var print = function(obj){ console.log(1); } ==>var print = obj =>console.l
《MATLAB GUI设计学习手记》（第4版）源码.part1,matlabgui设计实例,matlab
08-21
众多案例的源代码，均可完美运行，具有较高的学习价值。包括MATLAB的入门以及提高。
MATLAB GUI设计学习手记(第2版)_matlab_GUI_
09-30
本资料“MATLAB GUI设计学习手记(第2版)”主要面向初学者，旨在帮助他们快速掌握GUI的设计技巧。 GUI（图形用户界面）在MATLAB中的设计是通过GUIDE（GUI Development Environment）工具完成的，它提供了一个可视化...
【MATLAB GUI设计学习手记】源代码 数据.zip
08-24
本资源"【MATLAB GUI设计学习手记】源代码 数据.zip"包含了一份MATLAB GUI设计的学习资料和相关的源代码数据。这是一份宝贵的学习材料，对于想要掌握MATLAB GUI设计的初学者或进阶者来说非常有帮助。以下将详细介绍...
MATLAB GUI设计学习手记（第二版）——罗华飞编着2011.pdf
06-12
MATLAB GUI设计学习手记（第二版）——罗华飞编著2011
reactJs 入门学习
ygy211715的博客
01-14 396
1：首先安装搭建react项目所需的环境 1：打开cmd命令行，首先安装node 步骤：https://nodejs.org/en/download/      node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版本信息即表示安装成功。 2：npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息 3:：选择一个位置用...
React.Js学习指南
weixin_26750481的博客
09-09 282
There is a ton of options when it comes to client-side frameworks, and often it can be a little confusing for beginners to choose from a wide range of choices. Often these choices boil down to Angular...
React.js 学习笔记
qq_45192089的博客
04-07 491
https://reactjs.org/ React.js --第一天 1、React简介 React起源于Facebook的内部项目，因为该公司对市场上所有Javascript MVC框架都不满意，就决定自己写一套，用来架构Instagram（照片交友）的网站。做出来之后，发现这套东西很好用，就在2013年5月开源了； Angular 2009年（谷歌）； 由于React的设计思想独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它肯是将来web开发的主流工具； 清
React.js学习总结
阳明的优快云博客
08-01 202
React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很人多认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 Rea...
学习 React.js 需要了解的一些概念
fe_watermelon的博客
06-07 303
大家好，我是前端西瓜哥。React.js 是被广泛使用的用于构建用户界面的 JS 库。下面给大家介绍一下学习 React 需要了解的一些概念。在 React 这类框架流行之前，我们更新 UI，都是命令式的：我们需要手动指定元素，然后命令它改变样式。 这种写法其实是相当繁琐的。你可能需要给元素加上 id，加上 class 作以区分，可能还需通过查找当前元素的父元素来界定区域，然后手动作添加子元素、进行修改样式、移除等操作。所有的事情，都要自己一个个去操作，事无巨细，容易写错。React 和 Vue 这类框架的
React.js学习
weixin_51326478的博客
08-05 407
1、用于构建用户界面的JavaScript库，其实也是前端比较流行的框架之一2、它具有以下特点a.声明式b.组件化c.高效灵活d.虚拟DOMjsx是Facebook开发的一种易于组件开发的语法规则，跟js的写法很像，可以理解为js的一个扩展1、jsx中你可以写标签，可以写js表达式要用{}，标签要闭合，根标签只能有一个，标签的首字母大写的话就是寻找相应的组件，找不到就报错2、样式绑定类名 使用 calssName="类名"3、内联样式写 style={{key:value,...}}
如何学习ReactJS：初学者完整指南
jinmu520的博客
05-04 847
每个前端开发人员和Web开发人员都知道在多个地方编写相同的代码是多么令人沮丧和痛苦。如果他们需要在多个页面上添加一个按钮，他们将被迫编写大量代码。 使用其他框架的开发人员即使在编写频繁更改的组件时也面临着对大多数代码进行返工的挑战。 开发人员想要一个框架或库，使他们能够分解复杂的组件并重用代码以更快地完成他们的项目。这里React进来并解决了这个问题。 React是用于构建用户界面的最受欢迎的ja...
React(Js)学习
m0_46527751的博客
07-02 392
列表渲染 注意map遍历数组渲染列表时如果箭头后面有{ } 就要使用return返回 组件传参 传参的话绑定函数时前面要加箭头函数包裹 组件状态 通过class的实例属性state来初始化state的值是一个对象结构，表示一个组件可以有多个数据状态 状态的修改不要直接修改状态的值，而是基于当前状态创建新的状态值 表单处理 uuid 生成id的包 组件传值 父子组件传值 通过props实现 props解构赋值 子传父 兄弟组件传值 本质是子传父 父再传给另一个子 向下层组件传值（子 孙 等） 使
react学习资源汇总
weixin_34252686的博客
12-01 193
2019独角兽企业重金招聘Python工程师标准>>> ...
MATLAB GUI设计学习手记源代码解析
MATLAB GUI设计学习手记的源代码，可能包括以下几个重要的知识点： 1. GUI界面设计基础：在MATLAB中设计GUI，通常使用GUIDE（GUI Design Environment）或者App Designer工具。学习手记中会包含如何创建一个基本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值