React Native之React整理(一)

概述

复制代码
本篇将从React的特点、如何使用React、JSX语法、组件(Component)以及组件的属性,状态等方面进行讲解。
React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面。
  1. 当数据改变时,React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测,更容易调试。
  2. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的,而不是模板,所以你可以轻松地通过您的应用程序传递丰富的数据,并保持DOM状态。
  3. 一次学习随处可写,学习React,你不仅可以将它用于Web开发,也可以用于React Native来开发Android和iOS应用。

组件的属性(props)

复制代码
 我们可以通过this.props.xx的形式获取组件对象的属性,对象的属性可以任意定义,但要避免与JavaScript关键字冲突。

遍历对象的属性:
this.props.children会返回组件对象的所有属性。

React 提供一个工具方法React.Children 来处理this.props.children 。我们可以用React.Children.mapReact.Children.forEach 来遍历子节点。
React.Children.map

复制代码
array React.Children.map(object children, function fn [, object thisArg])

该方法会返回一个array。

React.Children.forEach

复制代码
React.Children.forEach(object children, function fn [, object thisArg])

Usage:

复制代码
var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});
ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

state

上文讲到了props,因为每个组件只会根据props 渲染了自己一次,props 是不可变的。为了实现交互,可以使用组件的statethis.state 是组件私有的,可以通过getInitialState()方法初始化,通过调用this.setState() 来改变它。当 state 更新之后,组件就会重新渲染自己。

render() 方法依赖于this.propsthis.state ,框架会确保渲染出来的 UI 界面总是与输入(this.propsthis.state )保持一致。

初始化state

通过getInitialState()方法初始化state,在组件的生命周期中仅执行一次,用于设置组件的初始化 state 。

复制代码
 getInitialState:function(){
    return {favorite:false};
  }

更新 state

通过this.setState()方法来更新state,调用该方法后,React会重新渲染相关的UI。
this.setState({favorite:!this.state.favorite});

Usage:

复制代码
var FavoriteButton=React.createClass({
  getInitialState:function(){
    return {favorite:false};
  },
  handleClick:function(event){
    this.setState({favorite:!this.state.favorite});
  },
  render:function(){
    var text=this.state.favorite? 'favorite':'un favorite';
    return (
      <div type='button' onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
  }
});

上面代码是一个 FavoriteButton 组件,它的getInitialState方法用于定义初始状态,也就是一个对象,这个对象可以通过this.state属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用this.render 方法,再次渲染组件。
心得: 由于this.propsthis.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性
最后编辑于:2025-02-05 20:42:19
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
小小鸭程序员7 分钟前
NPM版本管理终极指南:掌握依赖控制与最佳实践
java·前端·spring·npm·node.js
字节源流11 分钟前
【SpringMVC】入门版
java·后端
Code哈哈笑12 分钟前
【JavaEE】创建SpringBoot第一个项目,Spring Web MVC⼊⻔,从概念到实战的 Web 开发进阶之旅
spring boot·spring·java-ee
三少爷的鞋21 分钟前
深入理解 Java 中的 Integer 缓存机制
java
MrWho不迷糊26 分钟前
Spring Boot 的优雅启停:确保停机不影响交易
spring boot·后端
观无31 分钟前
C#的简单工厂模式、工厂方法模式、抽象工厂模式
java·开发语言·c#
chian-ocean32 分钟前
Linux 中的管道:进程间数据传输的利器
java·linux·redis
稀土村长37 分钟前
二叉堆的介绍以及代码解析上浮和下浮原理
java·数据结构
风象南37 分钟前
告别“我觉得”!用 JMH 搞懂你的 Java 代码性能
java·后端·性能优化
lss05551 小时前
eclipse-mosquitt之docker部署安装与使用
java·docker