React 基础语法知识学习笔记

1. 通过脚手架快速创建新的react应用 ： npx create-react-app my-react-app；
2. /src/index.js 为入口文件；
3. <React.StringMode>标签是 react的严格模式（可以理解为用于排错，进行组件内部的功能审查）；
4. /src/App.js 为根组件文件；
5. React组件有两种创建方式：函数式组件（推荐）、类组件；
6. jsx语法（js、html相结合）基本用法：

• return 后内容如换行，必须携带括号，单行可不带；
• jsx只能返回一个根元素；
• 想返回多级可以再外层包一层元素，也可以使用空标签 <></>、<Fragment></Fragment>；
• html标签必须正确闭合（无论是单标签）；

7. 插值：通过大括号{ }进行插值；
8. 插值可以使用的位置：标签内容、标签属性；
9. jsx中，js语句中的html标签可以不用添加引号：例如 let divContent = <span>content</span>;
10. 根据数据进行渲染:

import { Fragment } from "react";

function App() {
  const list = [
    {id:1, name:'wu'},
    {id:2, name:'li'},
    {id:3, name:'zhang'},
  ]
  
  const listContent = list.map(item=>(
    <Fragment key={item.id}>
      <li>{item.name}</li>
      <li>------------</li>
    </Fragment>
  ))

  return (
    <ul>{listContent}</ul>
  );
}

export default App;

11. jsx中事件方法使用驼峰命名法，举例为li元素添加点击事件：

import { Fragment } from "react";

function App() {
  const list = [
    {id:1, name:'wu'},
    {id:2, name:'li'},
    {id:3, name:'zhang'},
  ]
  function handleClick(e){
    console.log('点击',e)
  }
  const listContent = list.map(item=>(
    <Fragment key={item.id}>
      <li onClick={handleClick}>{item.name}</li>
      <li>------------</li>
    </Fragment>
  ))

  return (
    <ul>{listContent}</ul>
  );
}

export default App;

12. 使用useState进行状态处理，React与Vue不同，没有默认的数据响应式；

import { useState } from "react";

function App() {

  let [divContent,setContent] = useState('默认文字');

  function changeContent() {
    setContent('修改后的文字');
  }

  return (
    <>
      <div>{divContent}</div>
      <button onClick={changeContent}>点击改变文字</button>
    </>
  );
}

export default App;

13. 需要注意使用useState进行对象属性修改时，不能只针对一个属性进行修改，需要写完整对象的属性：

import { useState } from "react";

function App() {

  let [data,setData] = useState({
    title:'默认标题',
    content:'默认内容'
  });

  function changeData() {
    setData({
      ...data,
      content:'新内容'
    });
  }

  return (
    <>
      <div>{data.content}</div>
      <button onClick={changeData}>修改内容</button>
    </>
  );
}

export default App;

14. 使用useState进行数组更新：

import {useState} from "react";

function App() {
  let [list,setList] = useState([
    { id: 1, name: 'wu' },
    { id: 2, name: 'li' },
    { id: 3, name: 'zhang' }
  ])
  const listContent = list.map(item => (
    <li key={item.id}>{item.name}</li>
  ))

  function handleClick() {
    setList(list.filter(item => item.id!==2));
  }
  return (
    <>
      <ul>{listContent}</ul>
      <button onClick={handleClick}>更新</button>
    </>
  );
}

export default App;