React的相关基本概念

初识React

用html编写的UI，当从服务器或用户输入的交互数据动态的改变html的状态，使代码变得越来越复杂且后期维护成本越来越高，
因此，f8推出了react，google推出了angularjs,但是angular整体作为一个mvvm框架，其UI组件相对复杂，不利于重用，而react解决了这些问题

react不是一个完整的mvc、mvvm框架，只负责View层
react和web components不冲突
react就是运用组件化的方式处理UI的构成，将UI相对独立的模块定义成组件，或者用小的组件套用构成新的组件，这样的处理方式表明react是高度可重用的

JSX（JavaScriptXML）

jsx其实就是javascript的语法扩展

JSX中的表达式要包含在大括号里

userInfo(){
   return 'sya HI'
}
render() {
   return (
     <Text>
       {this.userInfo()}
     </Text>
   );
}

JSX本身就是一种表达式

userInfo(){
return <Text>'sya HI'</Text>
}
render() {
return (
    this.userInfo()
);
}

jsx在编译之后，会被转化为普通的JavaScript对象

React的渲染

元素时构成React应用的最小单位
React开发应用中只会定义一个根节点
要将React元素渲染到根DOM节点中，我们需要把它们传值给render()方法来将其渲染到页面上
```
class TestComponent extends React.Component{
  render(){
    return <Text>wakaka</Text>
  }
}
```
React更新元素渲染（React DOM会比较元素内容先后的不同，在渲染过程中只会更改改变的部分）

组件（Components）和属性(Props)

组件（Components）

组件的名字以大写开头
TestComponent就是一个组件
组件必须返回一个单独的根元素Text

class TestComponent extends React.Component{

  render(){
    return <Text>wakaka</Text>
  }
}

属性(Props)

组件都无法修改其自身的props

class TestComponent extends React.Component{

  constructor(props) {
    super(props);
  }

  render(){
    return(
      <Text>{this.props.title}</Text>
    );
  }
}

export default class App extends Component {

  render() {
    return (
        <TestComponent title='wakaka'/>
    );
  }
};

状态（state）和生命周期

状态（state）

state被称为本地状态或封装状态，不能设置自身组件以外的任何组件
state向下传递，作为其子组件的props，也称为单向数据流
state(状态)更新的俩种方式
- 不要直接修改 state(状态)，用 setState() 代替
```
this.setState({
title: 'Hello'
});
```
- state(状态) 更新可能是异步的，因为this.props和this.state()的形式它接受一个函数而不是一个对象。这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数
```
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
```

一个完整的小demo

export default class TestComponent extends React.Component{

  constructor() {
    super();
    this.state = {
      title: 'click',
    };
  }

  render(){
    return(
      <View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'red'}}>
        <TouchableOpacity onPress={() => this.click()}>
          <Text>{this.state.title}</Text>
        </TouchableOpacity>
      </View>
    );
  }

  click(){
    this.setState({
      title: 'Hello'
    });
  }
}

生命周期（执行顺序）

构造函数constructor()
渲染函数render()
组件被渲染到DOM之后componentDidMount()
DOM被销毁时componentWillUnmount()