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>
}
}
标签：状态,函数,render,基础,React,state,组件 From： https://www.cnblogs.com/lijingru/p/16856218.html