functional component
import React from 'react'
function App(){
return <h2>App</h2>
}
export default App;
class component
import React, {
Component } from 'react'
class App extends Component {
render(){
return <h2>App</h2>
}
}
export default App;
loop through the array
method 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;
Method 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 means empty tag used to write key
Method 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;
digital accumulation
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() data modification is synchronous, attempted update is asynchronous
To make it synchronous use the second parameter of 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;
Method 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;
Use of useEffect and 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;
Passing values between components
father to son
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;
son to father
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;
Three-layer data transfer by value (complex version)
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;
Three-layer data transfer by value (simplified version)
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;
Advanced version of
useContext to receive values
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;