React基本概念整理（一）render、jsx{}、props、state

React 是什么？

React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。

React 当中包含了一些不同的组件，我们从使用 React.Component 开始：

class ShoppingList extends React.Component {
  render() {
    return (
      
        Shopping List for {this.props.name}
        
          Instagram
          WhatsApp
          Oculus
        
      
    );
  }
}

// 通过这种标签语法来使用我们上面声明的组件:

这样我们就拿到了一个很有趣的看起来像 XML/HTML 的标签。你的组件向 React 描述了你想要渲染的内容。之后 React 会根据你开发应用数据的变化自动渲染和更新组件。

这里的 ShoppingList 是一种 React 组件类，或者叫 React 组件类型 之类的。一个组件会接受名为 props 的参数，并通过名为 render 的方法返回一个嵌套结构的视图。

render 返回的是你对你想要渲染内容的描述。React 会根据你的描述将对应的内容在屏幕上渲染出来。讲得更具体一点，render 返回的是一个 React 元素，是一种对渲染内容比较简洁的描述。大部分 React 开发者都会使用一种名为 JSX 的语法扩展来更方便地书写这种描述。比方说里面的

会被编译为 React.createElement('div') 。上面的那个例子就等同于：

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

即通过render来描述（声明）你要渲染的内容的描述。

JSX中的“大括号”{}

在 JSX 中你可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来。每一个 React 元素事实上都一个 JavaScript 对象，你可以在你的应用中把它当保存在变量中或者作为参数传递。

即jsx中的大括号用于使用javascript表达式
如下所示：

Shopping List for {this.props.name}

通过 Props 传递数据

假设我们有两个组件Board和Square

现在我们从 Board 组件传递一些数据到 Square 组件。

在 Board 组件的 renderSquare 方法中，我们将代码改写成下面这样，传递一个名为 value的 prop 到 Square 当中：

class Board extends React.Component {
  renderSquare(i) {
    return ;
  }

我们再来看Square组件的定义

class Square extends React.Component {
  render() {
    return (
      
    );
  }
}

在

{this.props.value}

中，我们获得到了Board引用Square组件时,

return ;

传递的value属性。

State

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。

一般来说，你需要在 constructor 中初始化state，然后在需要修改时调用setState方法。

如下：

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { isShowingText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      {this.props.text}
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      
        
        
        
        
      
    );
  }
}

即你需要在 constructor 中初始化state，然后在需要修改时调用setState方法

总结

React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架
React通过render来描述（声明）你要渲染的内容的描述。
jsx中的大括号用于使用javascript表达式。
通过 Props 传递数据。
在 constructor 中初始化state，然后在需要修改时调用setState方法。
props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。