操作DOM呈现页面,是一个将数据渲染为HTML视图的开源JavaScript库。
- 采用组件化模式,声明式编码,提高开发效率及组件复用率。
- react是驱动html dom 渲染;React Native是驱动android/ios原生组件渲染,react native 使用react进行移动端开发。
- 使用虚拟DOM+优秀的diffing算法,尽量减少与真实DOM的交互
- react的实现:数据-->虚拟DOM-->真实DOM
- 有函数式组件和类式组件(复杂组件)
- 类式组件
①类继承React.Component,不需要写(可写)构造器
②必须有render()
③render必须有返回值,想展示什么返回什么。
步骤:
- 创建类式组件
class MyComponent extends React.Component{
render(){
...
return<h1>我是适用于复杂组件的定义</h1>
}
}
2. 渲染组件到页面
ReactDom.render(<MyComponent/>,document.getElementById('test'))
//如果有函数式组件,则写document...
- 组件三大属性:props、refs、state
- 复杂组件是有状态的:state
对组件状态初始化,构造器:
constructor(props){
super(props) //如果A类继承了B类,A中写了构造器,那么A类构造器中的super是必须调用的
this.state = {ishot:true,wind:''} //写成一个对象
}
- render中的this ,指的是MyComponent的实例对象,即MyComponent组件实例对象
render(){ //读取状态 const {ishot} = this.state return<h1>今天天气很{ishot?'炎热':'凉爽'}<h1> }