React——函数组件

一、函数组件的创建

1、函数组件的创建

函数组件：使用JS的函数（或箭头函数）创建的组件称为函数组件，函数组件的规定

函数名称必须以大写字母开头

函数组件必须有返回值，返回JSX表达式

渲染函数组件：函数名作为组件标签名

组件名称可以是单标签也可以是双标签

2、函数组件事件处理

注意：函数组件中绑定方法不需要this

3、函数组件的Prop

3.1、函数组件的Props

props就是传递的JS对象的值

3.2、props默认值

首先，先来完成一个函数组件的默认值案例

import React from 'react';
import ReactDOM from 'react-dom';

function UserInfo(props){
    const template=(
        <div>
            <ul>
                <li>姓名:{props.username}</li>
                <li>年龄:{props.age}</li>
                <li>特长:{props.specialty}</li>
            </ul>
        </div>
    );
    return template;
}
//设置默认值的语法 组件名.defaultProps
UserInfo.defaultProps={
    username:'无名氏',
    age:0,
    specialty:'无特长'
}
const template=(
    <div>
        <UserInfo username='张明理'></UserInfo>
    </div>
);
ReactDOM.render(template,document.getElementById('root'));

这里如果在调用组件的时候赋值，那么默认值就不会生效了，倘若，默认值就会生效。

3.3、props验证器

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

function UserInfo(props){
    const template=(
        <div>
            <ul>
                <li>姓名:{props.username}</li>
                <li>年龄:{props.age}</li>
                <li>特长:{props.specialty}</li>
            </ul>
        </div>
    );
    return template;
}
UserInfo.propTypes={
    username:PropTypes.string.isRequired,
    age:PropTypes.number.isRequired,
    specialty:PropTypes.string
}
const template=(
    <div>
        <UserInfo age={'20岁'} specialty='打羽毛球'></UserInfo>
    </div>
);
ReactDOM.render(template,document.getElementById('root'));

4、有状态组件和无状态组件

• 函数组件又叫做无状态组件，类组件又叫做有状态组件
• 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
• 函数组件没有自己的状态，只负责数据展示
• 类组件有自己的状态，负责更新UI

二、Hooks简介

1、hook的由来和作用

react16.8以后的新特性Hooks函数组件在react16.8以前函数组件只能被动接收外部数据，并且没有自己的生命周期钩子函数，函数内部也没有this可用新特性Hookhook推出的动机主要是因为类组件有一下几个不足

• 组件之间复用公共逻辑比较麻烦，以前常见的提取组件公共逻辑的方式有高阶组件/renderProps等，但这些方式或多或少都对原有组件的代码组织方式有一定的破坏性
• 复杂组件变得难以理解（例如相同的逻辑可能要写在不同的生命周期钩子函数里面）
• 难以理解的class（比如对新手来见，class组件中的this不太好理解）

新特性hook出现之后，函数组件就可以完全替代类组件，但是这并不是说react官方会抛弃类组件，react官方文档中也表明了没有计划会在react中移除class组件。

注意：h