百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

React在开发中的常用结构以及功能详解

xsobi 2024-12-10 21:37 1 浏览

一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google。

但是能把算法说清楚,虚拟DOM说清楚的聊聊无几。对开发又没卵用,还不如来点干货看看咋用。

二.结构如下:

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

var Header = React.createClass({
   handleClick:function{
     console.log(this.refs.head);
     console.log(ReactDOM.findDOMNode(this.refs.head));
   },
   render:function{
     return (
      <div style={{ backgroundColor:'blue' }} onClick={ this.handleClick } ref='head'>
        <p>Header组件</p>
      </div>
     )
   }
})

var ComponentDemo = React.createClass({
//默认state
  getInitialState {
    return {
      current: 1,
      openKeys: ,
      result_data : {}
    };
  },
//默认props
  getDefaultProps {
      return {
        key:{
 value:2
        }
      };
  },
  //静态方法  调用 ComponentDemo. getBusinessName
  statics:{ 
     getBusinessName:function{
       return console.log('getBusinessName方法被调用。。。')
     }
   },
  handleClick(e) {
     console.log('div被点击。。。');
     console.log(this.refs.cct);
     console.log(ReactDOM.findDOMNode(this.refs.cct))
  },
  componentDidMount: function {

    //异步请求
    reqwest({
      url: 'http://localhost:90/menu',
      method: 'get',
      type: 'json'
    }).then(result => {
      if(this.isMounted){
        this.setState({
 result_data : result.data
        });
      }
      
    },function(err, msg){
       console.log(err)
       console.log(msg)
    });

    //使用props
    console.log(this.props.key.value)

  },
  componentWillReceiveProps(nextProps) {
      //接受新的props时候被触发
  },
  render {

    return (
      <div>
 <Header ref='cct'/>
 <div style={{ height:'100%',width:200 }} className='btn'  onClick={ this.handleClick }>CCT部分</div>
      </div>
    );
  }
})

ReactDOM.render(<ComponentDemo />,
document.getElementById('contain'));

这个例子中涉及了开发中常用的几个知识点。

1.improt 这样的引入方式是es6的语法 ,也可require

2.Header是个组件,组件的创建使用React.createClass({}),es6也还有别的写法,反正我是用不惯

3.每个组件都需要一个render函数,return中只能包含一个顶层标签,我们一般用div来包裹。且组件名称应该大写开头。

4.refs的属性可以帮助我们突破虚拟DOM的限制,可以获取到DOM结构,但是不要使用中文网上的类似:this.refs.xxx.getDOMNode,因为这样的写法已经不被支持。

this.refs.XXX的写法是用来获取react结构的。

我们应该使用react-dom提供的专门操作DOM的方法:ReactDOM.findDOMNode(this.refs.XXX)。

this.refs.XXX与ReactDOM.findDOMNode(this.refs.XXX)是不同的,虽然有时候我们打印出来的有时会相同。

5.当然,react最核心的就是一个状态机。getInitialState(只会在组件初始化的时候调用一次)就是用来初始化状态的,我们可以通过this.setState来修改状态。状态的每次修改都会出发render函数。

6.getDefaultProps这个函数可以帮助我们设置一个不变的数据结构,以便取用。相当于定义了一个常量。

7.statics就是用来顶一个静态方法的,我们可以定义各种函数,并通过ComponentDemo. getBusinessName方式来调用。结构:组件名.函数名

8.最重要的事件机制也是存在的,就像例子中的onClick,大部门事件机制都是支持的。

9.componentDidMount(只会在组件渲染结束后调用一次)这个函数就是跟组件的生命周期相关了。我们一般在里面会进行异步的请求之类的操作。

componentWillMount(只会在组件执行初始化渲染之前调用一次)刚好跟上面的相反。

还有其他的几个,个人理解为组件进入,开始,离开的钩子。

shouldComponentUpdate(object nextProps,boject nextState) (在函数有新的props或state的时候触发)这个钩子会主要管理组件是否更新的,返回的是个布尔值。默认是true,一般不建议使用。

10.组件肯定也少不了css的润色。但是这里添加style必须以对象的形式写,如果是数字的话,默认单位是px。

其他的属性必须用驼峰格式:style={{ backgroundColor:'red' }};

class必须写成className。

11.isMounted是用来判断组件是否已经插入DOM。一般请求后强烈建议在判断是否插入DOM后,再来修改state。

绝对不要直接改变 this.state,因为在之后调用setState可能会替换掉你做的更改。把this.state当做不可变的。

setState不会立刻改变this.state,而是创建一个即将处理的 state 转变。在调用该方法之后获取this.state的值可能会得到现有的值,而不是最新设置的值。

不保证 setState调用的同步性,为了提升性能,可能会批量执行 state 转变和 DOM 渲染。

setState将总是触发一次重绘,除非在shouldComponentUpdate中实现了条件渲染逻辑。如果使用可变的对象,但是又不能在shouldComponentUpdate中实现这种逻辑,仅在新 state 和之前的 state 存在差异的时候调用setState可以避免不必要的重新渲染。

以上仅属于个人愚见,如果错处,欢迎指出!

相关推荐

Android Studio 导入项目出现缺失解决

很多朋友安装好Androidstudio后准备试一把,但是导入项目的时候出现错误Cannotfindfile"...../project_name/settings.jar"这个错误是因为导入...

首个安卓12开发者预览版发布:隐私保护升级、更新UI、优化性能

来源:环球网2月20日消息,据engadget报道,来到二月,惯例也是谷歌发布安卓12开发者预览版的时候,以便于让开发者提前查看下一版安卓系统的新属性。谷歌工程副总裁戴夫·波尔克(DaveBurke...

推荐几个非常有用的开发工具之Android Studio插件

我们都知道Eclipse开发Android将在今年年底google不再继续提供相应的开发支持,转而开始强烈发展AndroidStudio,现在我就分享几款能帮助团队提升工作效率的几个Android...

Android Studio下的应用性能优化总结-内存优化

上一篇文章总结的布局优化的问题,如果对布局优化不是很熟悉的,可以看一下AndroidStudido下的应用性能优化总结–布局优化,这周一直筹划总结一下内存优化的问题,因为现在对于应用优化的文章很...

安卓开发之环境搭建「图文教程」 安卓应用开发环境搭建

安卓(Android)是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。接下来开始第一个安卓应用吧!需要用到的软...

Android APP性能测试上篇--启动时长、内存

如图所示,列出了目前app主要的一些性能指标,以及对应使用的测试工具。普遍的app性能测试,主要是以下几类:启动时长、内存、cpu、FPS(app使用的流畅度)、GPU过度渲染、耗电、耗流、cras...

AndroidStudio下的依赖管理 安卓依赖管理

在开发中用第三方库是很常见的事,如何在AndroidStudio下管理这些依赖呢?这就是这篇文章的目的。目录Maven/Ivy仓库依赖Module依赖aar文件依赖jar文件依赖例子完整代码一、Mav...

基于Android的师生学习交流平台:Android课程设计

基于Android的师生学习交流平台(Androidstudio毕业设计,Android课程设计)一、项目介绍系统分为学习资料,作业,师生交流,个人资料四大模块(1)学生端:新用户需要填写真实姓名,...

Android Studio 贴士 - 综述#3 android studios

(点击上方公号,可快速关注)英文原文:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-3注:文中链接皆为国外链接...

Android 11 Developer Preview首次更新发布:修复诸多问题

此前在2月19日,谷歌放出了Android11DeveloperPreview(安卓11开发者预览版),并表示Beta版本将于5月份推出,最终发行版将于2020年Q3面世。如今距离Android...

Android12 支持无线usb调试应用 安卓 usb调试

背景在android12版本中已经支持wifiusb调试了,再也不用查数据线了,下面主要说下连接步骤:1.在开发者启动无线调试...

InstantRun原理--深度剖析AndroidStudio2.0

http://crash.163.com/#news/!newsId=8推荐理由AndroidStudio2.0开始支持InstantRun特性,使得在开发过程中能快速将代码变化更新到设...

集成开发环境Android Studio整合Gemini:可生成、补全代码

IT之家4月9日消息,谷歌近日发布新闻稿,宣布在AndroidStudio中集成Gemini1.0Pro,从而帮助开发人员更快、更好地写出代码。谷歌表示目前相关整合仍处于预览阶段,...

Android studio 最新版本下Gradle的一些配置

当我们把Androidstudio版本更新到Bumblebee版本时,我们会发现创建新的项目时,有了一些改变。项目根目录下面的build.gradle变了:旧版本下的是这样子的:setting.gr...

Android Studio最新版下载安装:Android Studio模拟器怎么启动

目录第一部分:AndroidStudio软件介绍...