React技术

最新推荐文章于 2022-06-08 15:15:54 发布

带着梦想飞翔

最新推荐文章于 2022-06-08 15:15:54 发布

阅读量712

点赞数

分类专栏： JavaScript 文章标签： React技术

本文链接：https://blog.csdn.net/u013008795/article/details/95787199

版权

React技术注意：本章节运行环境在上一章节React项目构建之上。文章目录React技术简介Virtual DOM支持JSX语法测试程序程序解释JSX规范组件状态state属性props构造器constructor组件的声明周期函数试组件简介React是Facebook开发并开源的前端框架。当时他们的团队在市面上没有找到合适的MVC框架，就自己写了一个Js框架，用来架设Instagr...

摘要由CSDN通过智能技术生成

React技术

注意：本章节运行环境在上一章节React项目构建之上。

文章目录

React技术

简介

React是Facebook开发并开源的前端框架。
当时他们的团队在市面上没有找到合适的MVC框架，就自己写了一个Js框架，用来架设Instagram（图片分享社交网络）。2013年React开源。
React解决的是前端MVC框架中的View视图层的问题。

Virtual DOM

DOM(文档对象模型Document Object Model)
将网页内所有内容映射到一棵树型结构的层级对象模型上，浏览器提供对DOM的支持，用户可以是用脚本调用DOM API来动态的修改DOM结点，从而达到修改网页的目的，这种修改是浏览器中完成，浏览器会根据DOM的改变重绘改变的DOM结点部分。
修改DOM重新渲染代价太高，前端框架为了提高效率，尽量减少DOm的重绘，提出了Virtual DOM。Virtual DOM是一个JavaScript对象，性能更高。所有的修改都是先生成一个新的Virtual DOM,通过比较算法比较新旧Virtual DOM,得到差异化Virtual DOM,将这部分差异更新到浏览器DOM,浏览器只需要渲染这部分变化就行了。
React实现了DOM Diff算法可以高效比对Virtual DOM。

支持JSX语法

JSX是一种JavaScript和XML混写的语法，是JavaScript的扩展。

React.render(
    <div>
        <div>
            <div>content</div>
        <div/>
    </div>,
    document.getElementById('example')
)

测试程序

替换/src/index.js为先的代码

import React from 'react';
import ReactDom from 'react-dom';

class Root extends React.Component{
   
  render(){
   
    return <div>hello xdd</div>
  }
}

ReactDom.render(<Root/>,document.getElementById("root"))

保存文件后，会自动编译，并重新装载刷新浏览器端页面。

002
react_005

程序解释

import React from 'react';导入react模块
import ReactDOM from 'react-dom';导入react的DOM模块
class Root extends React.Component组件类定义，从React.Component类上继承。这个类生成JSXElement对象即React元素。
render()渲染函数。返回组件中渲染的内容。注意，只能返回唯一一个顶级元素回去。
ReactDom.render(<Root/>,document.getElementById('root'));第一个参数是JSXElement对象，第二个是DOM的Element元素。将React元素添加到DOM的Element元素中并渲染。

还可以使用React.createElement创建react元素，第一个参数是React组件或者一个HTML的标签名称(例如div、span)。

return React.createElement('div',null,'hello hello xdd');
ReactDom.reader(React.createElement(Root),document.getElementById("root"));

很明显JSX更简洁易懂，推荐使用JSX语法。
增加一个子元素

import React from 'react';
import ReactDom from 'react-dom';

class SubEle extends React.Component{
   
  render(){
   
    return <div>Sub content</div>;
  }
}

class Root extends React.Component{
   
  render(){
   
    return(<div><h2>Welcome xdd.com</h2><br/> <SubEle/></div>);
  }
}

ReactDom.render(<Root />,document.getElementById('root'));

003

注意：
1. React组件的render函数return返回，只能是一个顶级元素
2. JSX语法是XML,要求所有元素必须闭合，注意<br /> 不能写成<br>

JSX规范

约定标签中首字母小写就是html标记，首字母大写就是组件
要求严格的HTML标记，要求所有标签都必须闭合。br也应该写成<br />,/前留一个空格。
单商省略小括号，多行请使用小括号
元素有嵌套，建议多行，注意缩进
JSX表达式：表达式使用{}括起来，如果大括号内使用了引号，会当做字符串处理，例如<div>{'2>1?true:false'}</div>里面的表达式成了字符串了。

组件状态state

每一个React组件都有一个状态属性state,它是一个JavaScript对象，可以为它定义属性来保存值。如果状态变化了，会触发UI的重新渲染。使用setState()方法可以修改state值。
注意：state是每一个组件自己内部使用的，是组件自己的属性。
1.示例：依然修改/src/index.js

import React from 'react';
import ReactDom from 'react-dom';

class Root extends React.Component{
   
  //定义一个对象
  state = {
   p1:'www.hao123',p2:'.com'};//构造函数中定义state
  render(){
   
    this.state.p1 = 'python.xdd';// 可以修改属性值
    // this.setState(p1:'python.xddabc');//不可用对还在更新中的state使用setState。会触发递归调用render函数
    // Warning: setState(...): Cannot update during an existing state transition (such as within render). 
    setTimeout(()=> this.setState({
   p1:'python.xdd'}),1000);
    return(
      <div>
        <div>Welcome to {
   this.state.p1}{
   this.state.p2}</div>
      </div>
    );
  }
}

ReactDom.render(<Root />,document.getElementById('root'));

2.复杂例子

先看一个网页

<html>

<head>
    <script type="text/javascript">
        function getEventTrigger(event) {
    
            x = event.target; // 从事件中获取元素
            alert("触发的元素的id是：" + x.id);
        }

最低0.47元/天解锁文章

带着梦想飞翔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React技术

React技术注意：本章节运行环境在上一章节React项目构建之上。文章目录React技术简介Virtual DOM支持JSX语法测试程序程序解释JSX规范组件状态state属性props构造器constructor组件的声明周期函数试组件简介React是Facebook开发并开源的前端框架。当时他们的团队在市面上没有找到合适的MVC框架，就自己写了一个Js框架，用来架设Instagr...
复制链接

扫一扫