React中如何定义组件

前题：定义组件的方式分为两种:

1 函数式组件 :目前正在流行的方式

2 类组件 : 是从前的方式但是目前依然大量存在

> 切记: React整个程序只有index一个入口 ( 重点 )

函数组件

何谓函数组件/无状态组件（Function Component/Stateless Component）

函数组件顾名思义，就是以函数的形态存在的 React 组件。早期并没有 React-Hooks 的加持，函数组件内部无法定义和维护 state，因此它还有一个别名叫“无状态组件”。以下是一个典型的函数组件：

function DemoFunction(props) {
    const { text } = props 
    return ( 
        <div className="demoFunction"> 
            <p>{`function 组件所接收到的来自外界的文本内容是：[${text}]`}</p>
        </div> 
    ); 
  }

Hook规则view(视图):

截图.png

- 只在最顶层使用Hook, 不要在循环，条件或者嵌套函数中调用Hook

- 只在React函数中调用Hook, 不要在普通的JavaScript函数中调用Hook

- Hooks其实就是对原有React 的 API 进行了封装,暴露比较方便使用的钩子;

React.useState() 模拟state:

> useState参数为初始state值， 返回值为当前 state 以及更新 state 的函数

> useState 可以使函数组件像类组件一样拥有 state，函数组件通过 useState 可以让组件重新渲染，更新视图

React 函数组件中方法的优缺点:

截图1.png

useEffect的使用实例:

//数组内有内容 componnetDidMount==加载完成+固定数值渲染完成执行[this.setState({},()=>{})]

  React.useEffect(() => {}, [count])

  //数组为空 componnetDidMount==加载完成

  React.useEffect(() => {}, [])

  // componnetWillUnmount==卸载前

  React.useEffect(() => {

    return () => {

      console.log('这个函数是在卸载前执行')

    }

  })

  // componnetDidMount==加载完成+componentDidUpdate==更新完成

  React.useEffect(() => {

    console.log(12311)

  })

Class组件:

Class组件默认初始状态:


Class One extends React.Component {

//至少要有一个render方法

//render里有return

//可以返回的类型可以是: 数值 字符串，null undefined jsx

//最终返回结果都会渲染到页面中

    render(){
        <div></div>

    }

}

//导出

export default One

注意：

新创文件夹“Components”里创建文件文件名要求首字母大写

组件通过在其他页面中引入使用单标签实现组件渲染*

页面中引入组件的方式:

“import xx from ' ./components/xxx' ”

“import xx from ' @components/xxx' ”

父子传值

父传子：父组件单标签中定义事件名称子组件使用this.props.事件名称调用实现父传子

子传父: 父组件传递回调函数附带参数子组件调用并传参实现子传父

关于React 组件