【JavaScript--React】本篇文章将介绍React组件的基本使用和React最重要的组件实例的三大属性（State，Props，Refs）

🚗个人主页：最好的人啊

🚌系列专栏：HTML/CSS

🚐推荐一款模拟面试、刷题神奇、从基础到大厂的面试题库，要想走上人生巅峰迎娶白富美赶快点击这个网站⚡不要犹豫，白富美在向你招手，快来注册吧！

目录

 一，模块和组件

1，模块

2，模块化

3，组件

4，组件化：

二，函数式组件，复合函数组件，类式组件

1，创建函数组件

2，Props参数传递（重点）

3，复合函数组件

4，类式组件

5，创建实例

三，组件实例的三大属性

1，React State(状态)

1-1，State的用法

2，react this指向问题

3，props

3-1 ...运算符

3-2 批量传递参数

3-3 propTypes参数的限制

3-4函数组件使用props

4，refs

4-1 字符串形式的ref

4-2 回调函数下ref

4-4 createRef 创建ref容器  

---

 一，模块和组件

学过vue的小伙伴对组件这个概念应该不是很陌生了，废话少说直接来！

1，模块

理解：向外提供特定功能的js程序,一般就是一个js文件。

为什么：要拆成模块，随着业务逻辑增加,代码越来越多且复杂。

作用：复用js,简化js的编写,提高js运行效率。

2，模块化

        当应用的js都以模块来编写,这个应用就是一个模块化的应用

3，组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)

为什么：要用组件，一个界面的功能复杂

作用：复用编码,简化项目编码,提高运行效率

4，组件化：

                当应用是以多组件的方式实现,这个应用就是组件化的应用

二，函数式组件，复合函数组件，类式组件

实质：一个 React 应用就是构建在 React 组件之上的。

函数组件：该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “​props​”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

1，创建函数组件

function HelloPerson(){

 return <h1>你好，我是函数式组件!</h1>;

}

ReactDOM.render(<HelloPerson/>,document.getElementById('hello'));

注释：解析组件标签HelloPerson，发现组件是函数定义的，调用该函数，将返回的虚拟DOM，转为真实的DOM，随后呈现在页面上。

2，Props参数传递（重点）

function HelloPerson(person){
      console.log(this);//此处undefined babel编译后采取严格模式
  return (
      <ul>
      <li>姓名：{person.name}</li>
  <li>年龄：{person.age}</li>
  </ul>
  )
 }
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('hello'));