RootDOM
ReactJS 采用Virtual DOM的方式来代替JS原生的DOM操作方式来提高页面的响应速度，但是Virtual DOM同样需要挂在在用一个实体的DOM上，因此首先要创建一个根DOM来支撑后面所有的事
mReactInstanceManager = ((ReactApplication) getApplication()).getReactNativeHost().getReactInstanceManager();
Bundle bundle = new Bundle();
ReactRootView = reactRootView = new ReactRootView(this);
reactRootView.startReactApplication(mReactInstanceManager, "port", bundle);
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('port', () => App);
如上的reactRootView 就是我们创建的RootDOM，ReactNative通过字符串"port"进行访问和绑定，所有后面的事情我们将在这个基础上进行，比如上面代码，将App页面对象绑定在了"port"上。
组件（Component）
在ReactJS中一切都是组件。通过组件的状态，切换，组合来完成复杂的页面效果
export default class NoticeBar extends Component {
render(){
return(
<View></View>
);
}
}
组件属性（Props）
ReactJS 采用JSX（类XML表达式）语法,Props 就类似与XML的attribute。Props 是只读的，组件内部无论是方法还是类都无法更其值
class Me extends Component {
render(){
return(
<View>
<Text>{this.props.name}</Text>
</View>
);
}
}
class Root extends Component{
render(){
return(
<View>
<Me name={"pq"}/>
</View>
);
}
}
如上代码，name是Me组件的Props，在Me内部不能修改name的值，只能通过this.props.name来获取name属性的值
属性默认值
属性是组件外部传入的值，很多时候是选择性的传值，因此需要给一些不是必须的属性设置默认值，来做错误处理或是其他：
static defaultProps={
source:"",
height:12
}
属性类型限定（PropTypes）
JS中变量可以说是无类型的，在ReactJS中可以做类型限定（新版使用'prop-types'库）
static propTypes = {
title: PropTypes.string,
isUpdate: PropTypes.bool,
count: PropTypes.number,
callback: PropTypes.func
}
状态提升
状体提升就是将自身状态通过Props回调的方法向上传递给父组件
class Me extends Component {
updateAge(age){
this.props.callback(age);
}
render(){
return(
<View>
<Text>{this.props.name}</Text>
</View>
);
}
}
class Root extends Component{
render(){
return(
<View>
<Me name={"pq"} callback={age=>console.log(age)}/>
</View>
);
}
}
如上代码中，当Me组件执行updateAge后，将通过callback属性向上传递，最终在callback方法中打印age
组件状态（State）
Props是只读的，由外到内的传值。这儿State则是维系组件内部状态的变量，驱动组件更新的鞭子。
state是组件（Component）内部维系的一个对象，通过this.state.*进行对预定变量的读取，以及通过this.setState({})对预定state变量进行修改
注意：
1.直接给state赋值：this.state.data=[1,2,3]是无效的。state变量的更改应当通过setState进行。
2.this.props,this.state都是异步更新的值，setState同样是异步的
3.setState会进行状态合并更新比如setState({name:"123",age:23}),状态更新的时候会合并name及age的更新
初始化state
this.state={data:[]};
更改state
this.setState({data:[1,2,3]});
声明周期（Life）
在Android或是IOS中，每一个UI组件都是有生命周期的，同样在ReactJS中组件也是有生命周期的
constructor(props){
super(props);
}
componentWillMount(){
}
componentDidMount(){
}
componentDidUpdate(prevProps, prevState){
}
componentWillUnmount(){
}
componentWillReceiveProps(nextProps){
}
render(){
}
1.重点看componentWillReceiveProps，当组件Props被父组件更新的时候会在这个方法里面收到
2.当setState执行后，render方法会重新执行，以改变组件内容
组件引用
在原生的JS中我们可以通过document.getElementById("abc")来操作DOM，在ReactJS中则不这么用，因为这儿都是虚拟的DOM。但是我还是有需要在组件外调用组件内方法的需求，所以就有了组件对象引用。
class Me extends Component {
updateAge(age){
this.props.callback(age);
}
render(){
return(
<View>
<Text>{this.props.name}</Text>
</View>
);
}
}
class Root extends Component{
let meComponent=null;
updateage(){
this.refs.me.updateAge(12);
this.meComponent.updateAge(14);
}
render(){
return(
<View>
<Me ref="me" name={"pq"} callback={age=>console.log(age)}/>
<Me ref={(myref)=>meComponent=myref} name={"pq"} callback={age=>console.log(age)}/>
</View>
);
}
}
上面代码中，在Root组件中我们写了两个Me组件，ref的值就是组件的ID，第一个使用了静态的字符串ID，第二个使用了箭头函数的赋值操作，引用的是ReactJS自己生成的ID，在Root的updateage方法中分别对这两个组件的updateAge方法进行了操作。这两种方式是等价的。
ReactJS官方说明，除非必要，不要使用组件引用。如果确实需要，则推荐用箭头函数的方式代替静态赋值的方式
应当尽量使用setState的方式进行组件更新
条件渲染
JSX中可以通过不同的条件来渲染不同的组件或是属性，下面一个用三目运算符进行条件渲染的例子
class Me extends Component {
render(){
return(
<View>
<Text>{this.props.name}</Text>
</View>
);
}
}
class Root extends Component{
state={
name:"fox"
};
render(){
return(
<View>
{this.state.name==="fox"?
<Me name={"Firefox"} />:
<Text>“Chrome”</Text>}
</View>
);
}
}
当state.name等于'fox'的时候渲染Me组件，否则渲染Text组件
List&Keys
当组件内含有ListVIew或是某一组件的子组件为同一类型的组件时，ReactJs会将这些组件当做列表。
Keys可以在DOM中的某些元素被增加或是删除的时候帮转React识别是哪些元素发生了变化。因此在写代码的时候应当为每一个子组件元素给予一个确定的标识key。元素的key只有在它和它的兄弟节点对比时才有意义，但是元素的key在兄弟组件之间都应该是唯一的，就像五胞胎兄弟名字叫东南西北中一样。
用map生成list
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
在组件中写一些相同的子组件
<View>
<Text style={{backgroundColor: "#0f0"}} key={0}>今天北京晴天，大约10-20摄氏度</Text>
<Text style={{backgroundColor: "#00f"}} key={1}>去往长城的乘客请走八达岭高速</Text>
<Text style={{backgroundColor: "#ff0"}} key={2}>今天动物园人山人海</Text>
<Text style={{backgroundColor: "#f0f"}} key={3}>一定要登上长城，做好汉</Text>
<Text style={{backgroundColor: "#0ff"}} key={4}>美女，明天，后天，没了</Text>
</View>
网友评论