React Native的props和state的介绍

this.props

可以通过将属性传递给构造函数constructor来实例化组件,这些属性就叫做props。在组件渲染的时候,可以通过this.props访问该组件的属性。但是不在组件方法里面修改props。

该组件的父元素一般会修改它孩子的属性,然后孩子重新渲染将这些属性展现出来。当然,孩子不一定重新渲染,具体看shouldComponentUpdate()方法的返回值,该方法的默认值是返回值true,也就是默认会重新渲染。孩子可以重写该方法返回false,就不会重新渲染,一般这样做是为了减少不必要的渲染来提高性能。

this.state

组件通过state对象维护它内部的状态,组件内部的方法可以通过this.state访问。和props不同的是,组件的父元素不会去访问它孩子的state,毕竟state是用来维护该组件内部的状态的。

修改state是通过this.setState()方法进行的,比如说:不是直接this.state.foo=‘bar‘,而是this.setState({foo:‘bar‘}); 。会将setState的值合并到原来的state里面,如果存在了就覆盖掉。

时间: 2024-11-02 19:23:55

React Native的props和state的介绍的相关文章

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,即{

React Native专题-江清清

本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装R

React Native移动开发实战-3-实现页面间的数据传递

React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件中指定的,而且一经指定,在被指定的组件的生命周期中则不再改变. state通常是用于存储需要改变的数据,并且当state数据发生更新时,React Native会刷新界面. 了解了props与state的区别之后,读者应该知道,要将首页的数据传递到下一个页面,需要使用props.所以,修改home.

React Native基础与入门(二)--初识React Native

React Native组件 React Native是用React Native框架来组建Android和IOS App的技术,那么React Native组件就是React组件.React组件让你将UI分割成独立的.可重用的一些碎片或部分,这些部分都是相互独立的. 创建组件的三种方式 1.ES6创建组件的方式 export default class HelloComponent extends Component { render() { return <Text style={{font

听晴明老师从头讲React Native

01基本原理与开发环境搭建[录播]React Native架构和原理的简单介绍(16分钟)[录播]macOS iOS环境搭建(19分钟) [录播]macOS Android环境搭建(17分钟) [录播]Windows Android环境搭建(10分钟) [录播]Android设备的使用和注意事项(8分钟) 02javaScript.Node.ES6基础[录播]JavaScript基础(12分钟)[录播]ES6基础(12分钟)[录播]Node基础(15分钟)[资料]JavaScript.Node.

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

React Native专题

刚创建的React Native技术交流1群(282693535),React Native技术交流2群(496601483),React Native技术交流3群(496508742).欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're