React核心内容(一)

react笔记——（1）核心语法

1.文件组成

node_modules: 包

public：静态文件

src：主要文件

​ index.js：主引导文件(入口)

​ App.js：根组件

<React.StrictMode>	：用于纠错
例子：
      	<React.StrictMode>
    		<App />
  		</React.StrictMode>

2.Jsx书写方式

2.1 jsx格式：js + html

//jsx格式：js + html
function App() {	//此处App为根组件
  return (	//注意此处小括号，如果是单行的则可以不写，多行则需要写，但建议都写
    <div className="App">
          。。。
    </div>
  );
}

2.2 jsx知识点

2.2.1.无论单标签还是多标签必须闭合

​ 单标签：<App.js />
​ 多标签：

2.2.2.jsx只能返回一个根元素

例子：
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
          </header>
       </div>
       <div></div>//这个div就不能正常返回，会报错
     );
  }

解决方法（不希望有外部父级）：
1.将div包含在另一个div中
2.使用空标签(<></>)(渲染时不会产生多余的内容)

function App() {
      return (
          <>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
          </header>
       </div>
       <div></div>//这个div就不能正常返回，会报错
          </>
     );
  }

2.2.3.使用双标签Fragment

import {Fragment} from "react";

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

3.插值

function App() {
  const divContent = '标签内容'
  const divTitle = '标签标题'
  
  return (
     <div title={divTitle}>{divContent}</div> // 鼠标放在标签内容上显示标签标题
      // title="{divTitle}" => 鼠标放在标签内容上显示{divTitle}
  );
}
插值可以使用的位置：
	1.标签内容
	2.标签属性

function App() {
  //const divContent = '标签内容'
  const divTitle = '标签标题'

  const flag = false
  let divContent = null
  if(flag) {
    divContent = <span>flag为true</span>
  } else {
    divContent = <p>flag为false</p>
  }
  return (
    <div title={divTitle}>{divContent}</div>
  );
}

4.事件操作

function handClick (e) {
    console.log("点击了按钮",e)
  }

  return (
    <button onClick={handClick}>按钮</button>
  )
//可以接收参数e，类似DOM操作，里面包含了鼠标的操作坐标等内容

5.useState状态处理

Vue中可以声明一种响应式数据，响应式数据能驱动页面进行更新（用来减少操作的一种手段）

react中，函数式组件默认没有这种状态机制。

//这段代码并不能实现，点击按钮后将‘默认内容’更新为‘新内容’
let divContent = '默认内容'
  
  function handClick (e) {
    divContent = '新内容'
  }

  return (
    <>
       <div>{divContent}</div>
       <button onClick={handClick}>按钮</button>
    </>

所以要使用react提供的函数：useState(状态初始值)

//useState 会返回一个数组[内容1，内容2]
// （读）内容1 ==> 对当前数据的引用
// （改）内容2 ==> 一个函数，用来修改这个状态
import {useState} from "react";
const [content, setContent] = useState('标签的默认内容')

function handClick () {
	setContent('新内容')
}

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

5.1 对象形式的状态（或数组结构）

5.1.1 对象形式

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

function handClick () {
//	注意此处setData功能更改是直接将新值覆盖替换全部旧值
//		如果只写title: '新标题',那么content就会消失
//		所以一定要写全
setDate({
  title: '新标题',
  content: '默认内容'
})
}

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

当内容太多时就会很麻烦，所以可以使用展开操作：

//...数据名	会使同名的属性保留
//			  注意：新属性写在后面，新属性名和旧属性名相同时，新值会覆盖旧值
function handClick (e) {
    setDate({
      ...data,
      title: '新标题',
    })
  }

5.1.2 数组操作

5.1.2.1 增加

/* ...data,
 *    {id: ++id, name: '内容4'}
*/
// 这样使得点击按钮后，在数组中添加 id: 4, name: '内容4' 的内容
/* 呈现：内容1
		内容2
		内容3
		内容4
*/
/*		{id: ++id, name: '内容4'},
 *      ...data
*/
/* 呈现：内容4
		内容1
		内容2
		内容3
*/
const [data, setDate] = useState([
  {id:1,name:'内容1'},
  {id:2,name:'内容2'},
  {id:3,name:'内容3'},
])

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

let id = 3
  function handClick () {
    setDate([
      ...data,
      {id: ++id, name: '内容4'}
    ])
  }

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

5.1.2.2 删除（使用filter进行过滤）

//点击按钮后呈现
/* 呈现：
		内容1
		内容3
*/
function handClick () {
    setDate(data.filter(item => item.id !==2))
  }