React核心语法

目录

一、项目搭建

二、JSX

三、插值

3.1条件渲染

3.2列表渲染

四、事件

五、useState状态处理

5.1对象形式的状态

5.2数组形式的状态

作为一个菜菜菜菜鸟，在之前的学习中，一直学习和使用的是VUE框架，在应聘实习公司的过程中，要求使用React框架，于是对自己的学习进行归纳总结，实现React语法入门。

一、项目搭建

1. 打开终端
2. 输入npx create-react-app 项目名（英文）
3. cd 项目名    :此步为进入项目目录
4. npm start     ：此步为启动项目
5. 打开浏览器查看项目

如果是启动已有项目，则为打开终端，再输入以下两条命令：

npm i
npm run start

对于react项目，于我们初学者而言，可以将src文件夹的App.js以及index.js视为最重要的两个文件，其他文件都可以将其删掉，并将相关的引入删除。（我懒得删）

二、JSX

jsx将js语法与html语法书写在一起，相当于模板语法。语法内容有以下几点：

1. 函数组件return后的小括号不可遗漏，html在函数的返回值中
2. jsx只能返回一个根元素。解决措施1：再在外面加一层容器；解决措施2：最外层加空标签<></>
3. 无论是单标签还是多标签，需要正确的闭合

三、插值

function App(){
    const DivContent='标签内容'
    const DivTitle='标签标题'

    return {
        <div>{DivContent}</div>
 }
}

上述代码，浏览器即可显示“标签内容”，已“{ }”获取到了值。还有另一种方式，在标签属性中获取，形如<div title={DivTitle}>hello world!</div>，注意：{DivTitle}不能打双引号，不然就变成普通的文本值了。

3.1条件渲染

jsx把html与js混写，传统DOM方式会需要写个字符串的结构进行拼接之类的操作，变量可以赋值为null或者空字符串，这是jsx的简便之处。

3.2列表渲染

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;

key的设置帮助我们在任何情况下确认渲染的正确性，每一元素需要唯一的key属性，保证在当前DOM中数据的唯一性，在同级中是唯一的即可。注意：不能根据下标设置，下标随着元素变化也会发生变化，更建议的是将元素设置为以上代码块的形态。

当进行循环生成时，比如在每一个<li>下加上一段分割线，这是便使用<Fragment></Fragment>标签包裹住需要进行循环的元素，再将id值设置为<Fragment>的属性。

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;

四、事件

function App() {

  function handleClick(e){
    console.log('触发了事件'，e)
  }
  
  return {
    <button onClick={handleClick}>一个平平无奇的按钮</button>
  }
}

一个简单的点击事件设置如以上代码。

五、useState状态处理

以字符串类型的状态为例：

function App() {

  const [content,setContent]=useState('默认内容')
  function handleClick(e){
    setContent('新内容')
  }
  
  return {
    <>
     <div>{content}</div>
     <button onClick={handleClick}>一个平平无奇的按钮</button>
    </>
  }
}

在vue中可以声明一种响应式数据，响应式数据能驱动页面内容进行更新，减少DOM操作。在react中，函数式组件默认是没有这种响应式状态机制的，这时，使用useState函数，需要传进去一个参数，为数据初始值，返回一个数组，包含content、setContent两个内容。content、setContent可以理解为一个用来读、一个用来改。

5.1对象形式的状态

代码示例为对关联元素进行更新，且只更新title，注意：setData内需要传入所有参数，避免新数组替换旧数组，可使用...data进行所有旧属性值的引进，如遇相同元素的赋值，后面的语句覆盖前面的语句。即：新属性写在后面。

function App() {

  const [data,setData]=useState({
    title:'默认标题',
    content:'默认内容'
  })
  function handleClick(){
    setData({
      ...data,   //引进旧属性值
      title:'新标题'
    })
  }
  
  return {
    <>
     <div title={data.title}>{data.content}</div>
     <button onClick={handleClick}>一个平平无奇的按钮</button>
    </>
  }
}

5.2数组形式的状态

function App() {

  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 handleClick(){
    setData([
      ...data,   //引进旧属性值
     {id:++id,name:'小美'}
    ])
  }
  
  return {
    <>
     <ul>{listData}</ul>
     <button onClick={handleClick}>一个平平无奇的按钮</button>
    </>
  }
}

还可使用filter()函数之类过滤特定元素。以上便是react核心语法知识，如有错误，欢迎指正！

冲冲冲！