react 生命中期 props state区别 生命周期

npm安装create-react-app

npx create-react-app my-app

cd my-app
npm start

查看调试props验证  
babel-react-optimize 可以在调试环境下有propstype属性,在产品环境下自动去掉,以免占用浏览器资源,降低性能;

defaultProps可以给组件设置默认的初始值。

组件.defaultProps={

  initvalue:0

}
prop和state的区别:

prop是用于定义外部接口,state用于记录内部状态;

prop是组件外部设置,调用组件的时候使用,state是组件内部赋值;
组件不应该改变prop值,而state存在的目的就是让组件改变的。
*另外更改state需要用this.setState({})方法更改值,该方法会重新渲染dom,里边必须是对象。而直接修改state的值,dom并不会直接改变。

react生命周期:

相比于vue的生命周期,react相对更少一些,vue里是create mount update destroy  分别有之前和之后总共8个,react大的只有:

装载过程( mount):组件第一次在dom树渲染的过程;

更新过程(update):组件重新渲染

卸载过程(unmout):组件从dom删除的过程

原文地址:https://www.cnblogs.com/xiaoyaoweb/p/8976744.html

时间: 2024-08-03 20:30:55

react 生命中期 props state区别 生命周期的相关文章

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

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

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

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

A Bite Of React(2) Component, Props and State

component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 遇到自己定义的component Welcom,React会将它的属性(name)作为对象传递给组建Welcom,即{

8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系

一. PropTypes 与 DefaultProps 官方文档 1. PropTypes 属性校验 引入 PropTypes import PropTypes from 'prop-types'; 强校验 props 属性 eg: import React, { Component } from 'react' import PropTypes from 'prop-types' class TodoItem extends Component{ constructor(props){ sup

[转] 深入理解React 组件状态(State)

React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适的State,是正确创建组件的第一步.State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来:同时,State还必须是代表一个组件UI呈现的最小状态集,即State中的所有状态都是用于反映组件UI的变化,没有任何多余的状态,也不需要通过其他状态计算

深入理解React 组件状态(State)

React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适的State,是正确创建组件的第一步.State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来:同时,State还必须是代表一个组件UI呈现的最小状态集,即State中的所有状态都是用于反映组件UI的变化,没有任何多余的状态,也不需要通过其他状态计算

Vue与React两个框架的区别对比

简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js和Angular 1等框架不同,它的诞生改变了JavaScript的世界.其中最大的变化是React推广了Virtual DOM(虚拟DOM)并创造了新的语法--JSX,JSX允许开发者在JavaScript中书写HTML(译者注:即HTML in JavaScript). Vue致力解决的问题与R

React中constructor(props){}究竟是什么,以及super(props)与super()

定义class组件,为什么需要加上 super() ? 我们尝试去掉 super() 看看编译的结果: constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this); } 编译错误: 提示没有在this之前加上super() 其实就是少了super(),导致了this的 Reference Error class MyComponent extends React.Co

Webpack + React 开发 03 props

React中组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloWorld name="John"> ,就是 HelloWorld 组件加入一个 name 属性,值为 John.和直接使用 <div name="John"> 不同,React组件被渲染出来之后,在渲染之后的dom节点中是不能直接看得到 name 属性的,怎么获取呢?组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可