MIT实习前置培训笔记4---React核心语法训练

前言：由于react知识点很多，本节主要呈现我在自学过程中一些最重要的核心语法。小白可以按以下流程来复现本博客：create一个react项目后，更改App.js即可，试验每一个核心语法demo，切身体会react语法的作用。

一、JS基本操作

1.1 插值处理

在App.js中const一些基础变量，然后在前端渲染

import logo from './logo.svg';
import './App.css';

const divcontent='标签内容'
const divTitle='标签标题'

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

export default App;

1.2 标签属性-title

如果我们想要为divcontent这个变量赋予title（标题）的属性，可以通过以下语法来实现，这里主要title中{}中的内容不要加双引号。

<div title={divTitle}>{divcontent}</div>

1.3 条件渲染

很多时候渲染的内容是有条件的，满足一定条件才渲染，此时可以用到if-else来控制。具体演示就是用let将divcontent定义成变量，然后再判断。

import logo from './logo.svg';
import './App.css';

/*const divcontent='标签内容'*/

const divTitle='标签标题'

const flag=true
let divcontent=null

if(flag)
{
  divcontent=<span>flag is true</span>
}
else{
  <span>flag is false</span>
}

function App() {
  return (
    <div title={divTitle}>{
      divcontent}
      </div>
  );
}

export default App;

1.4 列表渲染

列表主要是用list和map来实现渲染。这部分需要注意key键值对的使用，即在渲染每个name时尽量给他分配一个id。这里有几个语法点：①map 方法会遍历数组 list 中的每个元素；②箭头函数接收 map 方法遍历的每个数组元素作为参数 item；③<ul>是一个无序列表。

import logo from './logo.svg';
import './App.css';

function App() {

  const list=[
    {id: 1, name: '晶'},
    {id: 2, name: '鑫'},
    {id: 3, name: '王'}
  ]
  const listContent=list.map(item=>
  (<li key={item.id}>{item.name}</li>)
  )
  return (
    <ul>{listContent}</ul>
  );
}

export default App;

 

1.5 Fragment的使用

有时候我们想在元素渲染下面再加一行分割线，直接写两行并列的<li></li>是会报错的，这个时候可以加一个Fragment来解决这个问题。

import logo from './logo.svg';
import './App.css';
import{Fragment} from "react"

function App() {

  const list=[
    {id: 1, name: '晶'},
    {id: 2, name: '鑫'},
    {id: 3, name: '王'}
  ]
  const listContent=list.map(item=>
  (
    <Fragment key={item.id}>
      <li >{item.name}</li>
      <li>-----------------</li>
   </Fragment>
)
  )
  return (
    <ul>{listContent}</ul>
  );
}

export default App;

二、事件处理函数

2.1 button控件的使用

渲染之后不仅要能看，还得能点击使用。

import logo from './logo.svg';
import './App.css';
import{Fragment} from "react"

function App(e) {

function handlclick()
{
  console.log('您点击了按钮',e)
}

  return (
    <button onClick={handlclick}>按钮</button>
  );
}

export default App;

2.2 react中useState状态函数的使用

首先需要知道为什么要用这个函数：如果之前是在vue上写可能会直接按照如下错误做法去写，就是定义一个按钮然后点击它，并企图它能在handclick函数发生时变化，实际上即便点了也变不了，这也就是为什么要用useState。

import logo from './logo.svg';
import './App.css';
import{Fragment} from "react"

function App(e) {

let divcontent='未点击按钮'


function handlclick()
{
  console.log('您点击了按钮',e)
  divcontent='已经点击按钮'
}

  return (
    <>
    <div>{divcontent}</div>
    <button onClick={handlclick}>按钮</button>
    </>
  );
}

export default App;

useState就是一个二维数组，[content，setContent]，content就是当前值本身，setContent则主要事件处理函数来取变更content。

import logo from './logo.svg';
import './App.css';
import{Fragment, useState} from "react"

function App(e) {

const [content,setContent]=useState('未点击按钮')

function handlclick()
{
   
  setContent('您已成功点击按钮')
}

  return (
    <>
    <div>{content}</div>
    <button onClick={handlclick}>按钮</button>
    </>
  );
}

export default App;

这次点击以后就可以变了

2.3 useState对于对象的操作

简单来说就是有时候我们是对一个结构体来操作，不仅仅只对一个变量来操作。

import logo from './logo.svg';
import './App.css';
import{Fragment, useState} from "react"

function App(e) {

const [data,setData]=useState({
  title:'1号标题',
  content:'未更改'
})

function handlclick()
{
  setData(
    {
      title:'2号标题',
      content:'已更改'
    }
  )
}

  return (
    <>
    <div title='data.title'>{data.content}</div>
    <button onClick={handlclick}>按钮</button>
    </>
  );
}

export default App;

2.4 useState函数对list列表进行操作（插入，删除，排序等）

下面主要以插入元素为例。即：当我们点击“按钮”以后，可以自动在界面上的列表上插入一个元素。（注：这里有个比较坑的地方需要注意，即...data要放到待插入元组的后面，如果放到{}括号内，或者没有这行代码，最后插入以后会发现之前存在的元组消失了，这里需要格外小心恶和注意），以下是插入的元素的代码：

import logo from './logo.svg';
import './App.css';
import{Fragment, useState} from "react"

function App(e) {

const [data,setData]=useState(
  [
    {id: 1, name:'王'},
    {id: 2, name:'晶'},
    {id: 3, name:'鑫'}
  ]
)

const listData=data.map(item => (
<li key={item.id}>{item.name}</li>)
)

let id=3

function handlclick()
{
  setData(
    [
     {
      id: id++,name:'小花猫',
     },
     ...data
    ]
  )
}

  return (
    <>
    <ul>{listData}</ul>
    <button onClick={handlclick}>按钮</button>
    </>
  );
}

export default App;

插入前的效果：

点击插入后的效果：

当然，也可以借助filter进行元素的删除，具体用法如下：

在上面插入的代码，变更一下setData函数即可。以下以删除id==2的元组为例：

function handlclick()
{
  setData(
    data.filter(item=>(item.id!=2))
  )
}

删除前的效果：

删除后的效果：

本节自此就结束了，下一节主要呈现“React中的组件通信与插槽”，敬请关注~~~