【Sui】前端共学React学习笔记（1）

请关注 sui 前端共学营及其社区，在这里你可以学到前端和 move 合约语言的知识。

项目搭建

• 1可以使用引入核心文件如react.js的方式
• 2使用React脚手架 npx create-react-app后面跟上项目名字

我这里使用的是后者，创建完进入项目便可以使用npm start启动项目。源码在src目录下，public是一些静态页面资源。src下现在较为重要的文件有两个。一个是index.js这里面引入了两关键库react和react-dom，后面通过react-dom的createRoot方法创建了ReactDomRoot实例，在下面用render进行跟组件渲染。React.StrictMode能先粗理解为排的，可以帮助我们进行组件内部功能审查。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

另一个便是跟组件App.js导入默认后缀是.js所以上面导入没有后缀.js是可行的。进入到App.js有一个简单的函数App()最后用exprot default App导出。所以react的组件便是一个函数形式，react组件一般是函数形式和类形式组件，函数组件对比类组件较简约简单，所以一般使用函数形式组件。

JSX

在react中直接将HTML和JS书写在一起，这种语法就叫JSX。

• 在return后面单行HTML可以不加小括号，多行换行的话不加小括号是无法展示的，需要return后添加小括号再往里放HTML。建议两种情况都添加小括号。

• JSX只能返回一个跟元素，不能有一跟元素的情况下再有一同级元素否则编译不成功。可以使用空标签作为根元素再将内容写入。 如以下形式：

  return (
      <>
          <div>
          </div>
          <div>
          </div>
      </>
  );

• 使用HTML标签要正确闭合，无论单标签亦是多标签都需要闭合。在index.js有例子：

  <React.StrictMode>
    <App />
  </React.StrictMode>

数据渲染

插值

若是希望呈现结果不是写死的，而是变量的话就可以通过大括号插值方式来呈现。插值不仅可以在标签内容中使用，还可以作用在标签属性。使用插值时只有大括号不加引号。

function App() {
  const divContent = "content";
  const divTitle = "title"

  return (
    <div title = {divTitle}>
      {divContent}
    </div>
  );
}

条件渲染

我们希望通过一个值是false或true来控制内容显示，真为span标签假为p标签， 注意这里修改内容不用像传统那样需要写成字符串。

function App() {
  const divTitle = "title"
  const flag = true;

  if (flag) {
    divContent = <span>true</span>;
  } else {
    divContent = <p>false</p>;
  }

  return (
    <div>
      {divContent}
    </div>
  );
}

列表渲染

为了根据一组数据进行渲染操作，现在有一个ul标签希望在其内部进行一组数据生成。可以使用map方式遍历数据返回它。注意需要给其加个key属性，虽然内容可以正常显示但是在控制台会有报红，我这里是加id作为标识。

function App() {
  const list = [
   { id: 1, name: "Alice" },
   { id: 2, name: "Bob" },
   { id: 3, name: "Cindy" }
  ]

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

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

若是希望在每个li下面加类似分割线效果循环的话，可以使用react提供的Fragment标签，key从在li这改为在Fragment标签中。

  const listContent = list.map(item => (
    <Fragment key={item.id}>
      <li>{item.name}</li>
      <li>-------------------------</li>
    </Fragment>
  ))

事件

比如有一个button可以使用onCLick方式设置事件，要是需要修改一个div中的内容使用传统的方式修改是无法是页面发生变化的。我们需要使用react提供的函数useState。使用方法如下：

import { useState } from'react';

function App() {
  const [content, setContent] = useState("默认");

  function handleClick() {
    setContent("点击了按钮");
  }

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

接下来将演示useState对象操作的方法，useState是直接将你传入的值替换到原来的值。要是原来对象有一个title值和content值要是只改title的话content会失去。 可以写全或者使用以下方式：

function App() {
  const [data, setData] = useState({
    title: "默认",
    content: "默认"
  });

  function handleClick() {
    setData({
      ...data,
      title: "新标题"
    });
  }

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

（新改的值放...data后面） 若要循环展示数组对象内容与列表渲染相同加个key，map遍历返回li。要是相对内容做变更如：

• 添加数据在尾

  function App() {
  const [data, setData] = useState([
  { id: 1, name: "Alice"},
  { id: 2, name: "Bob"},
  { id: 3, name: "Cindy"}
  ]);
  
  const listData = data.map(item => <li key={item.id}>{item.name}</li>);
  
  function handleClick() {
  setData([
    ...data,
    {id: 4, name: "David"}
  ]);
  }
  
  return (
  <>
    <ul>{listData}</ul>
    <button onClick={handleClick}>button</button>
  </>
  );
  }

• 添加数据在头

  function App() {
  const [data, setData] = useState([
  { id: 1, name: "Alice"},
  { id: 2, name: "Bob"},
  { id: 3, name: "Cindy"}
  ]);
  
  const listData = data.map(item => <li key={item.id}>{item.name}</li>);
  
  function handleClick() {
  setData([
    {id: 4, name: "David"},
    ...data
  ]);
  }
  
  return (
  <>
    <ul>{listData}</ul>
    <button onClick={handleClick}>button</button>
  </>
  );
  }

• 不显示某数据(以不显示id=2的为例子）

  function App() {
  const [data, setData] = useState([
  { id: 1, name: "Alice"},
  { id: 2, name: "Bob"},
  { id: 3, name: "Cindy"}
  ]);
  
  const listData = data.map(item => <li key={item.id}>{item.name}</li>);
  
  function handleClick() {
  setData(
    data.filter(item => item.id !== 2)
  );
  }
  
  return (
  <>
    <ul>{listData}</ul>
    <button onClick={handleClick}>button</button>
  </>
  );
  }