React组件基础一

1.组件基本介绍

• 组件是React中最基本的内容，使用React就是在使用组件

• 组件表示页面中的部分功能

• 多个组件可以实现完整的页面功能

• 组件特点：可复用，独立，可组合

2.React创建组件的俩种方式

2.1 函数组件

• 使用JS的函数或者箭头函数创建的组件

• 为了区分普通标签，函数组件的名称必须大写字母开头

• 函数组件必须有返回值，表示该组件的结构

• 如果返回值为null,表示不渲染任何内容

1. 使用函数创建组件

function Hello () {
    return (
    	<div>这是我的函数组件</div>
    )
}

2.使用箭头函数创建组件

const Hello = () => <div>这是一个函数组件</div>

3. 使用组件

ReactDOM.render(<Hello />, document.getElementById('root'))

2.2类组件

• 使用ES6的class语法创建组件

• 约定1：类组件的名称必须是大写字母开头

  约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性

  约定3：类组件必须提供render方法

  约定4：render方法必须有返回值,表示该组件的结构

1.定义组件

class Hello extends React.Component {
  render() {
    return <div>这是一个类组件</div>
  }
}

2.使用组件

ReactDOM.render(<Hello />, document.getElementById('root'))　　

3.有状态组件和无状态组件

3.1 有状态组件

类组件又叫做有状态组件，类组件可以自己提供数据，组件内部的状态（数据如果发生了改变，内容会自动的更新）。

3.2 无状态组件

函数组件又叫做无状态组件， 函数组件是不能自己提供数据的。

3.3 状态

状态（state）即组件的私有数据，当组件的状态发生了改变，页面结构也就发生了改变。

• 函数组件是没有状态的，只负责页面的展示（静态，不会发生变化）性能比较高
• 类组件有自己的状态，负责更新UI，只要类组件的数据发生了改变，UI就会发生更新。
• 在复杂的项目中，一般都是由函数组件和类组件共同配合来完成的

3.4 类组件的状态

• 状态state即数据，是组件内部的私有数据,只有在组件内部可以使用

• state的值是一个对象,表示一个组件中可以有多个数据

 state的基本使用：

class Hello extends React.Component {
  state = {
    msg: 'hello react'
  }
  render() {
    return <div>state中的数据--{this.state.msg}</div>
  }
}