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()