React 是什么？
React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。
React 当中包含了一些不同的组件，我们从使用 React.Component 开始：
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// 通过这种标签语法来使用我们上面声明的组件: <ShoppingList name="Mark" />
这样我们就拿到了一个很有趣的看起来像 XML/HTML 的标签。你的组件向 React 描述了你想要渲染的内容。之后 React 会根据你开发应用数据的变化自动渲染和更新组件。
这里的 ShoppingList 是一种 React 组件类，或者叫 React 组件类型 之类的。一个组件会接受名为 props 的参数，并通过名为 render 的方法返回一个嵌套结构的视图。
render 返回的是你对你想要渲染内容的描述。React 会根据你的描述将对应的内容在屏幕上渲染出来。讲得更具体一点，render 返回的是一个 React 元素，是一种对渲染内容比较简洁的描述。大部分 React 开发者都会使用一种名为 JSX 的语法扩展来更方便地书写这种描述。比方说里面的 <div /> 会被编译为 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表达式
如下所示：
<h1>Shopping List for {this.props.name}</h1>
通过 Props 传递数据
假设我们有两个组件Board和Square
现在我们从 Board 组件传递一些数据到 Square 组件。
在 Board 组件的 renderSquare 方法中，我们将代码改写成下面这样，传递一个名为 value的 prop 到 Square 当中：
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
我们再来看Square组件的定义
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
在
{this.props.value}
中，我们获得到了Board引用Square组件时,
return <Square value={i} />;
传递的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 (
<Text>{this.props.text}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
即你需要在 constructor 中初始化state，然后在需要修改时调用setState方法
总结
React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架
React通过render来描述（声明）你要渲染的内容的描述。
jsx中的大括号用于使用javascript表达式。
通过 Props 传递数据。
在 constructor 中初始化state，然后在需要修改时调用setState方法。
props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
网友评论