版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lvchenqiang_/article/details/83451477
Props
props是React组件的输入内容。 它们是从父组件传递给子组件的数据。props 是只读的。 不应该以任何方式修改它们.
代码示例:
import React, { Component ,PropTypes} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
WebView
} from 'react-native';
export default class Shop extends Component {
/// 设置默认的属性值
static defaultProps = {
name:"小明",
age:13
}
/// 属性的类型检查
static propTypes = {
name:PropTypes.string.isRequired(),/// 必须传递的
age:PropTypes.age
}
render() {
return (
<View style={styles.container}>
/*
* 父组件传值则为传过来的值 否则为默认值
* */
<Text>{this.props.name} {this.props.age}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
State
我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。
一般来说,你需要在 constructor 中初始化state(译注:这是 ES6 的写法,早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state,这一做法会逐渐被淘汰),然后在需要修改时调用setState方法.
代码示例
import React, { Component ,PropTypes} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
WebView
} from 'react-native';
export default class Shop extends Component {
// 初始状态
// state ={
// size:80
// }
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
size:80,
};
}
render() {
return (
<View style={styles.container}>
<Text>{this.state.size} </Text>
<Text onPress={()=>{
this.setState = ({
size:this.state.size+10
})
}}>增加</Text>
</View>
);
}
}
Ref
组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。
但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。
代码示例
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// 创建 ref 存储 textInput DOM 元素
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// 直接使用原生 API 使 text 输入框获得焦点
// 注意:通过 "current" 取得 DOM 节点
this.textInput.current.focus();
}
render() {
// 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}