一、React基础知识JSX与组件基础

68 阅读2分钟

JSX 语法

JSX - JS 语法扩展,可以在 JS 中写模板(类似 HTML 语法) JSX 已经成为 ES 语法标准,也可用于其他框架,如 Vue3

1. 标签
2. 属性
3. 事件
4. JS 表达式
5. 判断
6. 循环

标签

1. 首字母小写 - HTML tag
2. 首字母**大写** - 自定义组件
3. 如 <input/> 和 <Input/>就不一样

可以像 HTML 一样嵌套
JSX 里的标签必须是闭合的,<input> <br> 这样写在 JSX 会报错(在 HTML 中不会报错),必须闭合 <input/>
每一段 JSX 只能有一个根节点,或者使用 `<></>`Fragment

属性

HTML 属性基本一样,但有些和 JS 关键字冲突了

1. `class` 要改为 `className`
2. `style` 要写成 JS 对象(不能是 string),key 采用**驼峰写法**
3. `for` 要改为 `htmlFor`

事件

onXxx 的形式

注意 TS 的写法

function clickHandler(event: React.MouseEvent<HTMLParagraphElement>) {
    event.preventDefault()
    console.log('clicked')
}
return <p onClick={clickHandler}>hello world</p>

如果要想传递参数,可以通过如下方式

  function clickHandler(event: React.MouseEvent<HTMLParagraphElement>, x: string) {
    event.preventDefault()
    console.log('clicked', x)
  }
  return (
    <p onClick={(e: React.MouseEvent<HTMLParagraphElement>) => clickHandler(e, 'hello')}>
        hello world
    </p>
  )

PS:Event handlers must be passed, not called! onClick={handleClick}, not onClick={handleClick()}.

JS 表达式

{xxx} 格式表示一个 JS 变量或表达式,可用于

  • 普通文本内容,或判断、循环
  • 属性值
  • 用于注释

判断

JS 一般使用 if...else 做判断,但不能用于 JSX 的 {xxx} 中。

所以,可以选择其他方式做判断

  • 运算符 &&
  • 三元表达式 a ? b : c
  • 用函数封装
const flag = true
return <div>
    {flag && <p>hello</p>}
    {flag ? <p>你好</p> : <p>再见</p>}
</div>

或者用函数封装

function Hello() {
    if (flag) return <p>你好</p>
    else return <p>再见</p>
}
return <Hello></Hello>

循环

使用 map 做循环

  const list = [
    { username: 'zhangsan', name: '张三' },
    { username: 'lisi', name: '李四' },
    { username: 'Amorous', name: 'amorous' },
  ]
  const ul = <ul>
    {list.map(user => {
        return <li key={user.username}>{user.name}</li>
    })}
  </ul>

JSX 循环必须有 key - 帮助 React 识别哪些元素改变了,比如被添加或删除。

  • 同级别 key 必须唯一
  • key 是不可改变的 —— 尽量不用 index ,要用业务 ID (也不要用随机数)
  • key 用于优化 VDOM diff 算法