react学习01-快速入门

快速入门 – React (docschina.org)

React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。

使用 JSX编写标签

1. JSX 比 HTML 更加严格。必须闭合标签
2. 不能返回多个 JSX 标签，必须将它们包裹到一个共享的父级中（一个根元素）
3. 如果你大量的 HTML 需要移植到 JSX 中，你可以使用 在线转换器。

添加样式

1. 使用 className指定

<img className="avatar" />

显示数据

1. 大括号包裹
2. JSX属性·转义到JavaScript·时，使用大括号，而非引号

# 标签内容
return {
    
    <h1> {
    
     user.name } </h1>}
# 属性
return {
    
    <img src={
    
    user.image} />}
return {
    
    img style={
    
    {
    
    width: user.imageSize,height: user.imagesize}} />

条件渲染

1. 使用常规的 JavaScript 代码

<div>{
    
    isShow? (<Component1/>) : (<Component2/>)}</div>
<div>{
    
    isShow&& <Component/>}</div>

渲染列表

export default function ShopList() {
    
    
    const listItem = list.map(it => <li key={
    
    it.id}>{
    
    it.name}</li>)
	return (<ul>{
    
    listItem}</ul>)
}

li有key属性

响应事件

# 组件
funciton BtnClick() {
    
    
    function handleClick() {
    
    alert('1')}
    return (<button onClick={
    
    handleClick}>click me</button>)
}
#使用
export default function myApp() {
    
    
    return (<BtnClick/>)
}

更新界面

1. 从React 引入 useState

import {
    
    useState} from 'react'
function myBtn() {
    
    
    const [count, setCount] = useState(0)
}

命名惯例：[something, setSomething]

多次渲染同一个组件，每个组件都有子级的state

使用 Hook

1. 以 use开头的函数被称为 Hook
2. useState是 React的内置 Hook.
3. Hook比普通函数严格，只能在组件的顶层调用。

组件间共享数据

1. state向下传递，使用JSX的大括号，传递下来的信息称为 prop
2. 子组件通过函数参数进行接收

#父
return {
    
    <MyBtn count={
    
    count} onClick={
    
    handleClick} />}
#子
function MyBtn({
     
     count, onCLick}) {
    
    
    return (<button onClick={
    
    onCLick})>{
    
    count}</button>
}