LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

Reast自学篇-3

2022/4/26 开发 开发 React 前端 学习

Reast自学篇-3

第三期，第三期，嘿嘿嘿

组件的基本创建

组件一般分为两类，类组件和函数组件，两者的区别个人认为如下

  • 函数组件
    • 简单方便，不复杂
    • 开箱即用
    • 无状态（需要用hook去绑定状态）
  • 类组件
    • 比较复杂
    • 需要导入React包
    • 有状态（原生支持状态）
    • 集成React布局

两者目前区别有点大，但是随着React框架的更新官方有意推函数组件，估计以后也会是函数组件来用得多了

函数组件

函数组件的创建较为简单，但是目前函数组件是无状态的，不太好保存数据等操作（AJAX），可能需要hook来辅助才能完整使用

参考代码如下

function HelloWorldAppJs () {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}
function App () {
  return (
    <div>
      <HelloWorldAppJs></HelloWorldAppJs>
    </div>
  )
};

我们可以逐步分析下代码

function HelloWorldAppJs () {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

这一部分是这样来的

首先定义一个函数，函数内返回一个JSX，就这么简单。。。（括号是为了方便换行）

function App () {
  return (
    <div>
      <HelloWorldAppJs></HelloWorldAppJs>
    </div>
  )
};

后面这部分，就是我们渲染上去的内容，在组件开发中需要遵守以下三点

  • 组件首字母必须大写
  • 函数组件必须有返回值，不然渲染啥。。。
  • 对于程序而言，你返回的值就是他渲染的东西，因此return的值会被渲染上去。
  • 函数组件可以自闭和 <hello/>，当然也可以成对出现 <hello></hello>

类组件

类组件比较复杂，他需要继承自React，但是他本身是有状态的，因此可以用来跑AJAX

代码如下

import React from "react"
class ClassCommend extends React.Component {
  render () {
    return (
      <>
        <div>this is a class command</div>
      </>
    )
  }
}
function App () {
  return (
    <div className="App">
      <ClassCommend />
    </div>
  )
}

这里App函数组件基本没变化，变化主要在上面部分

import React from "react"

导包，不导包会炸

class ClassCommend extends React.Component {
  render () {
    return (
      <>
        <div>this is a class command</div>
      </>
    )
  }
}

这里分析下

首先我们生成一个类，继承 React.Component的结构，然后写一个 render创建个函数(这个我也不知道是啥)，然后返回 JSX

我也搞不明白这个类组件是干啥的。。。

最后就和函数组件一样导出就好

点击事件

点击事件的开发其实非常简单，我就直接放代码了

函数组件就是在JSX中的支持的组件内添加 onClick=?这个标记，之后这个组件被点击后就触发对应的函数

函数组件点击事件

function HelloWorldAppJs () {
  const cientHandler = () => {
    console.log("hihihi")
  }
  return (
    <div>
      <h1>Hello</h1>
      # 这里就是响应一个点击事件，点击了就丢到cientHandler这个函数，
      <div onClick={cientHandler}>点我</div>
    </div>
  )
}
function App () {
  return (
    <div>
      <HelloWorldAppJs></HelloWorldAppJs>
    </div>
  )
};

<div onClick={cientHandler}>点我</div>

这里就是响应一个点击事件，点击了就丢到 cientHandler这个函数，至于 cientHandler则使用常规的JSX语句编写一个箭头函数处理即可。

类函数点击事件

我也不会，看代码吧

import React from "react"
class ClassCommend extends React.Component {
  clickHandler = () => {
    console.log("类组件被触发")
  }
  render () {
    return (
      <>
        <div>this is a class command</div>
      </>
    )
  }
}
function App () {
  return (
    <div className="App">
      <ClassCommend />
    </div>
  )
}

其实差别也不大，都是调用组件

但是务必注意

[scode type=yellow]调用函数一定要加this不加this会报错，因为会出现this指向问题[/scode]

剩下的看代码就好啦
img_show