在线模拟器
http://dabbott.github.io/react-native-web-player/
-
静态变量声明
image.png
-
变量作用域
-
局部变量，函数结束销毁
-
class内部变量，在单个class内读写，class实例销毁则销毁，需要使用this.来访问
defaultProps和class内部变量区别
-
defaultProps内部的变量是所有class实例共享的，只有一份
-
但是class内部声明的变量则是每个实例都会拥有一份的。
-
class外部声明的比如 const d = [1,2,3]; 则在整个文件中都可以使用
-
class外部声明的变量，比如global.c=0 ; 则在整个项目中都可以引用。是作用域最大的变量，但是使用的前提就是只有该句执行之后，才能使用。
image.png
class内部成员变量的写法
image.png
组件的循环生成，循环生成的组件需要唯一的key值来区分
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
const names = ['fage','tingting','xixi','haimian'];
class GoodMorning extends Component {
static defaultProps = {
name:'somebody',
};
render() {
return(
<View style={styles.container}>
<Text>
Good, Morning, {this.props.name}!
</Text>
</View>
)
}
}
class App extends Component {
render() {
return (
<View style={styles.container}>
{
// 带大括号则写return , 不带大括号则不写，需要注意一下。
names.map(name=> {
return <GoodMorning key={name} name={name}/>
})
}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
})
AppRegistry.registerComponent('App', () => App)
image.png
- 可以使用内容值，也可以使用index下标
names.map((name,index)=> {
return <GoodMorning key={name} name={name}/>
- 如果我们在同一个View组件中，循环生成两套组件，会不会造成key值重复的问题呢？
代码如下：
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
const names = ['fage','tingting','xixi','haimian'];
class GoodMorning extends Component {
static defaultProps = {
name:'somebody',
};
render() {
return(
<View style={styles.container}>
<Text>
Good, Morning, {this.props.name}!
</Text>
</View>
)
}
}
class GoodEvening extends Component {
static defaultProps = {
name:'somebody',
};
render() {
return(
<View style={styles.container}>
<Text>
Good, Morning, {this.props.name}!
</Text>
</View>
)
}
}
class App extends Component {
render() {
return (
<View style={styles.container}>
{
// 带大括号则写return , 不带大括号则不写，需要注意一下。
names.map((name,index)=> {
return <GoodMorning key={name} name={name}/>
})
}
{
// 带大括号则写return , 不带大括号则不写，需要注意一下。
names.map((name,index)=> {
return <GoodEvening key={name} name={name}/>
})
}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
})
AppRegistry.registerComponent('App', () => App)
- 如上图，key值在两套循环中生成会有重复，但是在同一套循环中生成的Key值没有重复即可。所以，以上是可行的。
image.png
state
-
特性：界面变化刷新靠state
-
state修改靠setState方法
-
不能直接修改state的值
-
setState是合并操作，可以但修改其中一个值即可，而不会修改其他属性的值
-
setState是异步操作，修改不会直接生效的。那如果想使用修改过后的值判断怎么做呢？使用以下方法即可。
state = {
likes:0
};
onPress = ()=>{
const {likes} = this.state;
const newStates = this.state.likes + 1;
this.setState({
likes : newStates,
});
};
为什么要引入state这个概念呢？
-
例子：以前写一个界面的刷新，如果是3种状态，则会有9种状态间的变化
image.png
-
恶心的代码：
image.png
-
使用state刷新呢？则只有三种情况，状态的变化直接影响界面的变化
image.png
-
会不会有性能问题？
-
React刷新原理：
image.png
-
为什么要指定key值？
-
旧的刷新机制，也就是不给UI组件指定key值
image.png
-
新的刷新机制，也就是给UI组件一个个指定不同的key值，这样就只用刷新key值不同的组件，减少性能开支
image.png
网友评论