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