React基础知识--组件（二）

三、React组件

组件概念

使用js函数（或者箭头函数）创建的组件，就叫做’函数组件‘

函数组件

•  函数组件的创建和渲染

#创建
function Yolo() {
  return <div>Yolo nihao</div>
}
// 渲染
// <Hello/>或者<Hello></Hello>
function App() {
  return (
    <div className="App">
      <Yolo />
      <Yolo></Yolo>
    </div>
  )
}
export default App

基础约定

1. 组件的名称必须首字母大写，React内部会根据这个来判断是组件还是普通的HTML标签
2. 函数组件必须要有返回值，表示该组建的UI结构；如果不需要渲染任何内容，则返回null
3. 组件就像HTML标签一样可以被渲染到页面中，组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合

类组件

类组件的创建与渲染

import React from 'react'
// 类组件的创建和渲染
// 创建
class YoloComponent extends React.Component {
  render() {
    return <div>Yolo 这是第一个类组件</div>
  }
}

function App() {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <YoloComponent />
      <YoloComponent></YoloComponent>
    </div>
  )
}
export default App

基础约定

1. 类名称必须以大写字母开头
2. 类组件应该继承React.Component父类，从而使用父类中提供的方法或属性
3. 类组件必须提供render方法render方法必须有返回值，表示该组件的UI结构

事件绑定

如何绑定事件

语法：on + 事件名称={事件处理程序}，比如<div onClick={ ( ) = >{ } }></div>

注：react事件采用驼峰命名法 例如：onMouseEnter、onFocus

案例：

事件对象e说明

通过事件处理程序的参数获取事件对象

事件绑定传递额外参数

• 第一种只需要一个额外参数 { clickHandler }->{ ( ) = > clickHandler ( ' 自定义参数 ' ) }
• 既需要e也需要额外参数{ (e) => clickHandle ( e ,' 自定义的参数 ' ) }

组件状态

初始化状态

• 通过class的实例属性state来初始化
• state的值是一个对象结构，表示一个组件可以有多个数据状态

注：

1. 编写组件其实就是编写原生js类或着函数
2. 定义状态必须通过state实例属性的方法，提供一个对象，名称是固定的就叫做state
3. 修改state中的任何属性，都不可以通过直接赋值必须走setState方法，这个方法来自于继承得到的
4. 这里的this关键词很容易出现指向错误的问题，上面的写法最推荐，没有this指向问题

读取状态

 状态案例：点击使数值加 1 

this指向问题说明