快速入门 – React (docschina.org)
React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母。
使用 JSX编写标签
- JSX 比 HTML 更加严格。必须闭合标签
- 不能返回多个 JSX 标签,必须将它们包裹到一个共享的父级中(一个根元素)
- 如果你大量的 HTML 需要移植到 JSX 中,你可以使用 在线转换器。
添加样式
- 使用
className
指定
<img className="avatar" />
显示数据
- 大括号包裹
- JSX属性·转义到JavaScript·时,使用大括号,而非引号
# 标签内容
return {
<h1> {
user.name } </h1>}
# 属性
return {
<img src={
user.image} />}
return {
img style={
{
width: user.imageSize,height: user.imagesize}} />
条件渲染
- 使用常规的 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/>)
}
更新界面
- 从React 引入 useState
import {
useState} from 'react'
function myBtn() {
const [count, setCount] = useState(0)
}
命名惯例:[something, setSomething]
多次渲染同一个组件,每个组件都有子级的state
使用 Hook
- 以
use
开头的函数被称为 Hook - useState是 React的内置 Hook.
- Hook比普通函数严格,只能在组件的顶层调用。
组件间共享数据
- state向下传递,使用JSX的大括号,传递下来的信息称为 prop
- 子组件通过函数参数进行接收
#父
return {
<MyBtn count={
count} onClick={
handleClick} />}
#子
function MyBtn({
count, onCLick}) {
return (<button onClick={
onCLick})>{
count}</button>
}