React Native - (二) Props属性和State状态
2017-12-12 18:04
806 查看
本文CSDN地址
本文有道地址
上一篇 React Native - (一) 了解文件结构
下一篇 React Native - (三) 样式
以常见的组件
也就是说,组件
source: 指定要显示图片的地址
style: 来控制组件的尺寸
译注:图片可能不会显示:iOS9引入了新特性App Transport Security (ATS)。参见这篇说明修改。
请注意
因此 我们可以把任意合法的 JavaScript 表达式通过
自定义的组件也可以使用
通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。
创建
添加属性
了解基础
一般来说, 你需要在 constructor 中初始化
假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经制定好了,所以文字内容应该是一个
上述代码是对
React ES6 class constructor super()
在
其实前面就有说到
一般来说, 你需要在 constructor 中初始化
解答一:
仅当存在
如果在你声明的组件中存在
如果在你的代码中存在
小结:
解答二:
仅当你想在
将
如果你只是想在别处访问它,是不必传入props的,因为
(一) React Native - 了解文件结构
(三) React Native - 样式
本文有道地址
上一篇 React Native - (一) 了解文件结构
下一篇 React Native - (三) 样式
Props(属性)
Props官方解释: 大多数组件在创建的时候可以使用各种参数来进行定制,用于定制的这些参数就是Props(Properties属性)
以常见的组件
image为例,在创建一个图片时,可以传入一个名为
source的 prop 来指定要显示的图片的地址,以及使用名为
style的prop来控制尺寸。
也就是说,组件
image有两个属性
source和
style:
source: 指定要显示图片的地址
style: 来控制组件的尺寸
//定义一个名为 `Bananas` 组件 class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( <Image source={pic} style={{width: 193, height: 110}} /> ); } }
译注:图片可能不会显示:iOS9引入了新特性App Transport Security (ATS)。参见这篇说明修改。
请注意
{pic}外围有一层括号,我们需要用括号来把
pic这个变量嵌入 JSX 语句中。
{}的意思是
{}内部为一个 js 变量或者表达式,需要执行后取值。
因此 我们可以把任意合法的 JavaScript 表达式通过
{}嵌入到 JSX语句中。
自定义的组件也可以使用
props。
通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。
class Greeting extends Component { render(){ return ( <Text>Hello {this.props.name}!</Text> ); } }
Greeting相当于
Text的进一步封装。
export default class App extends Component<{}> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> 123123 </Text> <Text style={styles.instructions}> {instructions} </Text> //1//2 <Greeting name="jerry" /> </View> ); } }
创建
Greeting组件
添加属性
name并制定值为
jerry
了解基础
Component和文件结构,使用
props和基础的
Text、
Image以及
View,你就已经足以编写各式各样的 UI 组件了。是不是很简单?哈哈~
State(状态)
我们使用两种数据来控制一个组件:props和
state。
props是在父组件中指出,而且一经指定,在被指定的组件的生命周期中则不再改变。对于需要改变的数据,我们需要使用
state。
一般来说, 你需要在 constructor 中初始化
state,然后在需要修改时调用
setState方法。
假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经制定好了,所以文字内容应该是一个
prop。而文字的显示或隐藏的状态(快速的显隐切换就产生了闪烁的效果)则是随着时间变化的,因此这一状态应该写到
state中。
export default class App extends Component<{}> { render() { return ( /* 4. 实例代码(四) */ <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> ); } } class Blink extends Component { // 构造函数 constructor(props){ super(props); this.state = {showText: true}; setInterval(() => { this.setState( previousState => { return {showText : !previousState.showText}; }); }, 1000); } render(){ let disdlay = this.state.showText ? this.props.text : ''; return ( <Text>{disdlay}</Text> ); } }
上述代码是对
state的初步使用,值得注意的是
React ES6 class constructor super()
在
constructor里面调用
super是否是必要的?
super与
super(props)的区别?
其实前面就有说到
一般来说, 你需要在 constructor 中初始化
state,然后在需要修改时调用
setState方法。
解答一:
仅当存在
constructor的时候必须调用
super,如果没有,则不用
如果在你声明的组件中存在
constructor,则必须要加
super。
class MyClass extends React.component { constructor(){ console.log(this) //Error: 'this' is not allowed before super() } }
如果在你的代码中存在
consturctor,那你必须调用:之所以会报错,是因为若不执行
supe,则
this无法初始化。
小结:
Blink组件扩展自
Component, 我们可以理解为
Blink继承自
Component。
Component默认是提供了它的 构造函数的,在
Blink中我们重写父类的构造函数,而像
this这些是在
Component或者更高一个层次中被初始化的,那么我们需要在
Blink中,调用父类的构造函数,从而对
this初始化或者定义。
解答二:
仅当你想在
constructor内使用
props才将
props传入
super。
React会自行
props设置在组件的其他地方(以供访问)。
将
props传入
super的作用是可以使你在
constructor内访问它.
如果你只是想在别处访问它,是不必传入props的,因为
React会自动为你设置好:
(一) React Native - 了解文件结构
(三) React Native - 样式
相关文章推荐
- React Native开发】React Native 基础之Props(属性)与State(状态)使用讲解
- React Native入门(三)之Props(属性)和State(状态)
- [React-Native]Props和State
- React-Native 基础(三) 使用State改变状态
- React Native 快速入门之认识Props和State
- React-Native 动态属性state
- react native中的属性、状态、样式的理解
- 混合开发的大趋势之一React Native Props (属性)
- 混合开发的大趋势之一React Native State (状态),Style(样式)
- react demo12 (获取组件属性状态this.state)
- React Native State和Props
- 混合开发的大趋势之一React Native Props (属性)
- 混合开发的大趋势之一React Native State (状态),Style(样式)
- react demo13 (根据组件属性状态this.state实现表单实时监控)
- React-Native - 使用AppState获取App运行状态(以及监听状态改变事件)
- ReactNative入门之props与state
- react中props和state属性
- React Native之Props属性
- React Native基础&入门教程:以一个To Do List小例子,看props和state