react学习记录(三)——状态、属性、生命周期

react的状态state

  React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById(‘example‘)
);

  1、通过上边的代码可以看出页面中显示的时间是在state中的,但是在设置计时器后,没过一秒重新更新state的值,页面中显示出来的也会每隔一秒变化一次,说明页面中的内容是跟随数据的变化实时变化的,

  2、时间的变化是因为在tick函数中进行了state的改变,而tick函数中改变state的值是在setState中执行的,所以state的值不能直接改变state,要通过setstate来改变

  3、设置计时器和清除计时器是在两个函数中执行的,这两个函数是生命周期的钩子函数

react的属性props

  react中的props属性是从父组件中获取的,也可以设置默认的属性,如果父组件没有传值的时候直接使用默认的属性

  

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

HelloMessage.defaultProps = {
  name: ‘Runoob‘
};
 //此处如果传入name值使用的是给定的值,如果没有传入值的话使用的是Runoob
const element = <HelloMessage/>;

ReactDOM.render(
  element,
  document.getElementById(‘example‘)
);

  props属性是不能被修改的,如果使用需要被修改的值要用state来代替props

react的生命周期

组件的生命周期可分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

生命周期的方法有:

    • componentWillMount 在渲染前调用,在客户端也在服务端。
    • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
      可以在你确认不需要更新组件时使用。
    • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
    • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

原文地址:https://www.cnblogs.com/wyongz/p/11128093.html

时间: 2024-11-05 17:24:23

react学习记录(三)——状态、属性、生命周期的相关文章

Hibernate学习之三种状态及生命周期(图)

三种状态: 生命周期: 代码表示: //三种状态     public void testThreeState(){         TUser user=new TUser();         user.setName("spark");  //此时user处于Transient                  try {             Transaction tx=session.beginTransaction();             session.save

React学习笔记-4-什么是生命周期

什么是声明周期?组件本质上就是状态机,输入确定,输出一定确定.如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx.第二个就是组件把状态和结果一一对应起来,从而能够直观的看出来,程序在不同的状态是的输出.属性是由父组件传递给子组件的,状态是子组件内部维护的一些数据,当状态发生变化时候,组件也会进行更新,因此我们可以理解成一个state对应一个render的结果,这样我们就可以知道在不同的state下,组件会render出什么样的结果,从而就知道组件在页面上

Quartz定时任务学习(二)web应用/Quartz定时任务学习(三)属性文件和jar

web中使用Quartz 1.首先在web.xml文件中加入 如下内容(根据自己情况设定) 在web.xml中添加QuartzInitializerServlet,Quartz为能够在web应用中使用,提供了一个QuartzInitializerServlet和一个QuartzInitializerListener,用于在加载web应用时,对quartz进行初始化. <servlet> <servlet-name> QuartzInitializer </servlet-na

React 源码剖析系列 - 生命周期的管理艺术

目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(Component Lifecycle)是它的核心概念,本文从源码入手,来剖析 React 生命周期的管理艺术. 阅读本文需要对 React 有一定的了解,如果你不知何为组件的生命周期,请详读 React 生命周期的文档. 如果你对 React 组件的生命周期存在些许疑惑,如生命周期如何顺序管理:

k8s的Pod状态和生命周期管理

Pod状态和生命周期管理 一.什么是Pod? 二.Pod中如何管理多个容器? 三.使用Pod 四.Pod的持久性和终止 五.Pause容器 六.init容器 七.Pod的生命周期 (1)Pod phase(Pod的相位) (2)Pod的创建过程 (3)Pod的状态 (4)Pod存活性探测 (5)livenessProbe和readinessProbe使用场景 (6)Pod的重启策略 (7)Pod的生命 (8)livenessProbe解析 一.什么是Pod? Pod是kubernetes中你可以

Windows API 编程学习记录&lt;三&gt;

恩,开始写API编程的第三节,其实马上要考试了,但是不把这节写完,心里总感觉不舒服啊.写完赶紧去复习啊       在前两节中,我们介绍了Windows API 编程的一些基本概念和一个最基本API函数 MessageBox的使用,在这节中,我们就来正式编写一个Windows的窗口程序. 在具体编写代码之前,我们必须先要了解一下API 编写窗口程序具体的三个基本步骤:             1. 注册窗口类:             2.创建窗口:             3.显示窗口: 恩,

Maven学习(四):生命周期与maven插件

一.maven 生命周期 (一)简介 Maven强大的一个重要的原因是它有一个十分完善的生命周期模型(lifecycle),这个生命周期可以从两方面来理解: 1.顾名思义,运行Maven的每个步骤都由它来定义的,这种预定义的默认行为使得我们使用Maven变得简单,相比而言,Ant的每个步骤都要你手工去定义. 2.这个模型是一种标准,在不同的项目中,使用Maven的接口是一样的,这样就不用去仔细理解每个项目的构建了,一般情况下,mvn clean install  这样的命令是通用的. 3.一个M

Spring Boot学习记录(三)--整合Mybatis

Spring Boot学习记录(三)–整合Mybatis 标签(空格分隔): spring-boot 控制器,视图解析器前面两篇都已弄好,这一篇学习持久层框架整合. 1.数据源配置 数据源使用druid,maven引入相关依赖,包括spring-jdbc依赖,mysql依赖 1.转换问题 配置的过程要学会为什么这样配置,而不是只学会了配置.这里我们可以和以前的配置方式对比: 以前版本 <!--配置数据库连接池Druid--> <bean id="dataSource"

React Native组件的结构和生命周期

React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导入组件 1.2 导入API 1.3 导入自定义组件 2.组件的声明 组件的生命分为组件的定义和样式.组件的定义有各种组件的组成结构.方法的定义. 2.1 组件的定义 2.2 组件样式 组件样式的定义可以直接在组件的定义中的style中定义.但是对于样式复杂的组件需要组件样式. 3.组件的注册或导出