函数组件
import React from 'react'
function App(){
return <h2>App</h2>
}
export default App;
类组件
import React, {
Component } from 'react'
class App extends Component {
render(){
return <h2>App</h2>
}
}
export default App;
循环遍历数组
方法1
import React, {
useState} from 'react'
function App(){
const [arr, setArr] = useState(['刘备', '关羽', '张飞'])
return (
<ul>
{
arr.map((item, index)=>{
return (
<li key={
index}>{
item}</li>
)
})
}
</ul>
)
}
export default App;
方法2
import React, {useState, Fragment} from 'react'
function App(){
const [arr, setArr] = useState(['刘备', '关羽', '张飞'])
return (
<ul>
{
arr.map((item, index)=>{
return (
<Fragment key={index}>
<li>{item}</li>
</Fragment>
)
})
}
</ul>
)
}
export default App;
Fragment 表示空标签 用来写 key
方法3
import React, {
Component, Fragment } from 'react'
class App extends Component {
state = {
arr: ['张飞', '关羽', '刘备']
}
render(){
return (
// Fragment空标签
<ul>
{
this.state.arr.map((item, index)=>{
return (
<Fragment key={
index}>
<li>{
item}</li>
</Fragment>
)
})
}
</ul>
)
}
}
export default App;
数字累加
import React, { Component, Fragment } from 'react'
class App extends Component {
state = {
num: 1
}
render(){
return (
// Fragment空标签
<>
<h2>数字为{this.state.num}</h2>
<button onClick={this.addNum.bind(this)}>累加</button>
</>
)
}
addNum(){
this.setState({
num: this.state.num + 1
})
console.log(this.state.num)
}
}
export default App;
this.setData() 数据修改是同步的, 试图更新是异步的
为了使其变为同步的 使用setState第二个参数
import React, {
Component, Fragment } from 'react'
class App extends Component {
state = {
arr: ['张飞', '关羽', '刘备'],
num: 1
}
render(){
return (
// Fragment空标签
<>
<h2>数字为{
this.state.num}</h2>
<button onClick={
this.addNum.bind(this)}>累加</button>
</>
)
}
addNum(){
this.setState({
num: this.state.num + 1
},()=>{
console.log(this.state.num)
})
// console.log(this.state.num) // 1-异步 2-同步的
}
}
export default App;
方法3
import React, {
useState, Fragment} from 'react'
function App(){
const [num, setNum] = useState(1)
const addNum = () => {
// setNum(num + 1) // 拿新值覆盖初始值
setNum((num)=>num+1) // 拿新值覆盖旧值
}
return (
<>
<h2>数字为: {
num}</h2>
<button onClick={
addNum}>累加</button>
</>
)
}
export default App;
useEffect 和 useRef 的使用
import React, {
useState, Fragment, useRef} from 'react'
function App(){
const [num, setNum] = useState(1)
const element = useRef(null)
// useEffect(callback, [num])
// useEffect -》 模拟三个生命周期
// mounted (componentDidMount)
// updated (componentDidUpdate)
// beforeDestroy (componentWillUnmount)
// 如果所有数据改变触发该回调函数 则 不需要写 []
// 如果要监听某一个或某几个值时 都将其放到[] 内
// useRef -》 用来获取元素或组件 的
const addNum = () => {
// setNum(num + 1) // 拿新值覆盖初始值
setNum((num)=>num+1) // 拿新值覆盖旧值
console.log(element)
}
return (
<>
<h2 ref={
element}>数字为: {
num}</h2>
<button onClick={
addNum}>累加</button>
</>
)
}
export default App;
组件间传值
父传子
import React, {
useState, Fragment, useRef} from 'react'
function Sub(props){
return (
<>
<h2>子组件中的数字{
props.num}</h2>
<button onClick={
()=>props.setNum(props.num + 1)}>累加</button>
</>
)
}
function App(){
const [num, setNum] = useState(1)
return <Sub num={
num} setNum={
setNum}/>
}
export default App;
子传父
import React, {
useState, Fragment, useRef} from 'react'
function Sub(props){
return (
<>
<h2>子组件中的数字{
props.num}</h2>
<button onClick={
()=>props.childFn(props.num)}>累加</button>
</>
)
}
function App(){
const [num, setNum] = useState(1)
const childFn = (arg) =>{
setNum(num +arg)}
return <Sub num={
num} childFn={
childFn}/>
}
export default App;
三层数据传值 (复杂版)
import React, {
useState, Fragment, useRef, createContext} from 'react'
// createContext 上下文空间
function Father(props){
return (
<>
<h2>子组件中的数字{
props.num}</h2>
<button onClick={
()=>props.childFn(props.num)}>累加2</button>
</>
)
}
function Sub(props){
return (
<>
<h2>子组件中的数字{
props.num}</h2>
<button onClick={
()=>props.childFn(props.num)}>累加</button>
<Father num={
props.num} childFn={
props.childFn}/>
</>
)
}
function App(){
const [num, setNum] = useState(1)
const childFn = (arg) =>{
setNum(num +arg)}
return <Sub num={
num} childFn={
childFn}/>
}
export default App;
三层数据传值 (简化版)
import React, {
useState, Fragment, useRef, createContext} from 'react'
// createContext 上下文空间
const NumContext = createContext()
function Sub(){
return (
// NumContext.Consumer 接收数据
<NumContext.Consumer>
{
({
num, setNum})=>(
<>
<h2>{
num}</h2>
<button onClick={
()=>setNum(num+1)}>累加</button>
</>
)
}
</NumContext.Consumer>
)
}
function Father(){
return <Sub />
}
function App(){
const [num, setNum] = useState(1)
const childFn = (arg) =>{
setNum(num +arg)}
return (
// NumContext.Provider 传数据
<NumContext.Provider value={
{
num, setNum}}>
<Father />
</NumContext.Provider>
)
}
export default App;
进阶版
useContext 进行接收值
import React, {
useState, Fragment, useRef, createContext, useContext} from 'react'
// createContext 上下文空间
const NumContext = createContext()
function Sub(){
const {
setNum, num} = useContext(NumContext)
return (
<>
<h3>{
num}</h3>
<button onClick={
()=> setNum(num + 1)}>累加</button>
</>
)
}
function Father(){
return <Sub />
}
function App(){
const [num, setNum] = useState(1)
const childFn = (arg) =>{
setNum(num +arg)}
return (
// NumContext.Provider 传数据
<NumContext.Provider value={
{
num, setNum}}>
<Father />
</NumContext.Provider>
)
}
export default App;