react的一些常用语法

大帅子
376 阅读3分钟

大家好,我是大帅子,我最近在学习react,刚学了两天,往后每一天给大家介绍一下基础的语法吧,本人也是刚学,有什么问题欢迎大家提出一起学习那我们从最基础的讲起吧,我们直接跳过react的介绍,直接讲语法

1.react的特点就是跟写html一样

<div className="app">
    <h1>Hello React! 动态数据变化:{count}</h1>
</div>

2.接下我们可以先创建一个react项目玩一下

我们直接通过npm来创建
npx create-react-app your-project-name
1. npx create-react-app 是固定命令，`create-react-app` 是 React 脚手架的名称
2. your-project-name 表示项目名称，可以修改
3.项目启动是 npm start

这里就不给大家介绍文件夹里的各个文件是干嘛的了

3.书写规范

react的书写规范是通过jsx(JavaScript XML)
1.jsx就是在js里面书写html
2.示范给大家放在下面

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))
4.react组件的创建方式

组件分为类组件,跟函数式组件,声明方式如下:
1.函数式组件的声明要注意以下的几点
(1)函数名首字符大写
(2)必须有返回值

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

const title = <h1>react的两种组件</h1>

// 定义一个函数式组件
const Com1 = () => {
  return <div>第一个函数式组件</div>
}

// 定义一个类组件
class Com2 extends React.Component {
  render () {
    return <div>第一个类组件</div>
  }
}

const content = (
  <div>
    {title}
    <Com1 />
    <hr />
    <Com2 />
  </div>
)

ReactDOM.render(content, document.getElementById('root'))
5.使用 ES6 的 class 创建的组件，叫做类（class）组件

注意点:

  1. 类名必须以大写字母开头
  2. extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。
  3. 类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次
// import { Component } from 'react'
// class 类名 extends Component {
import React form 'react'
class 类名 extends React.Component {
  // ... 
  render () {
    return 本组件的UI结构
  }
}
6. 有状态组件和无状态组件

有状态组件：能定义state的组件。类组件就是有状态组件。

无状态组件：不能定义state的组件。函数组件又叫做无状态组件

7.定义状态

有两种等价的格式：

  1. state = 对象
  2. 在构造函数中用this.state= 对象来做初始化
import React from "react";
export default class Hello extends React.Component {
  // 1. 方式1 state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
  // 2. 方式2 构造函数
  constructor() {
    super() // 在构造函数内部使用this，必须提前调用super
    this.state = {
      list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
      isLoading: true
    }
  }
8.事件绑定

注意 :React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......

<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 }  ></元素>
9. setState的典型用法

setState 是修改state里面的数据的,这个切记不能忘

// 无效修改
this.state.count = 100 
//有效修改
this.setState({
  count: this.state.count++
})
9.非受控组件-ref

步骤

  1. 导入方法。import { createRef } from 'react'
  2. 调用createRef方法创建引用，假设名为refDom。 const refDom = createRef()
  3. refDom设置给表单元素的ref属性。<input ref={refDom}/>
  4. 通过refDom.current.value来获取值。console.log(this.refDom.current.value)

内容

  • 受控组件是通过 React 组件的状态来控制表单元素的值
  • 非受控组件是通过手动操作 DOM 的方式来控制
  • 此时，需要用到一个新的概念：ref
  • ref：用来在 React 中获取 DOM 元素

示例代码

// 1. 导入方法
import { createRef } from 'react'

class Hello extends Component {
  // 2. 调用createRef方法创建引用
  txtRef = createRef()

  handleClick = () => {
    // 4. 通过.current.value来获取值
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-非受控组件-ref</h1>
         {/* 3. 设置给表单元素的ref属性 */}
        <p><input type="text" ref={this.txtRef}/></p>
        <button onClick={handleClick}>获取文本框的值</button>
      <div>
    )
  }
}

今天就讲这么多,很杂有点乱,我也是刚学这个,有什么问题欢迎提问,我会在看到的第一时间回答的😊

avatar
文章
阅读
粉丝