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