React组件

如何定义组件

import React from "react"

 

export default class App extends Component {} 

切记里面要有一个render函数，这个函数里面必须返回一个jsx语法

 

es6的类定义

表示这个组件继承了react父类

里面要写render函数，render里面要返回一个jsx语法

在引入组建的时候，不能使用组件名，而是标签的形式

组件可以用单标签，也可以是双标签

<App/>或<App></App>

react严格规定，组件 必须大写：区分组件和元素

 

使用div来做父级包裹造成标签的浪费，使用Fragment，它不会被渲染成到页面上，可以当做无用标签来使用

 

引入component和fragment标签

import React ,{Component,Fragment} from "react"

 

export default class App extends Component {}

 

 

 

render( )函数

render函数用来渲染虚拟DOM，当第一次渲染完毕以后，会将渲染的结果保存在缓存当中，当数据发生改变以后，render函数会进行第二次渲染，但是在渲染的时候，会将缓存中的数据拿出和现在的数据进行对比，改变需要改变的虚拟DOM，而不是将所有的虚拟DOM重新渲染

 

constructor( ) 初始化函数 生命周期

用来定义当前组件的状态（属性） 

 

React中如何进行数据的修改：调用setState

this.setState({

    key:value

})

key是需要修改的属性，value是需要修改成的值