两篇文章搞定ReactNative之搞定RectJS

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>