React 函数组件
函数组件的创建方式
const Hello = (props) => { return <div>{props.message}</div> } const Hello = props => <div>{props.message}</div> function Hello(props){ return <div>{props.message}</div> }
消除了this
函数组件能代替Class组件吗？
完全可以,但是目前不行,我们要学些新的东西，比如hooks API
函数组件代替Class组件
面临两个问题
1.函数组件没有state
React v16.8.0推出Hooks API
其中的一个API叫做useState可以解决问题
2.函数组件没有生命周期
React v16.8.0推出Hooks API
其中的一个API叫做useEffect可以解决问题
useEffect(函数式编程的专有名词)是专门用来解决生命周期的问题的。
1.函数组件没有state怎么办？
React提供了useState并提供读、写2个API,可以对数据进行读、写操作。
第1个参数是读，第2个参数是写，初始值为0。
需要引入useEffect或者直接React.useEffect
const App = props => { const [n, setN] = React.useState(0) const onClick = () => { setN(n + 1) } return ( <div>{n} <button onClick={onClick}> +1 </button> </div> ) }
函数组件模拟生命周期
什么叫生命周期？
当处于某个阶段时会有提醒要不要做什么事(渲染、挂载、更新、卸载）
用useEffect模拟3个重要的生命周期
一.通过useEffect模拟/实现第一次渲染
细节:useEffect默认每次渲染都会调用(只有1个参数)，利用第2个参数[]指明只在第1次渲染时调用该函数。
import React, { useEffect } from "react" //需要引入useEffect或者直接`React.useEffect` const App = props => { const [n, setN] = React.useState(0) const onClick = () => { setN(n + 1) } console.log(n) //每次渲染都会执行 useEffect(() => { console.log("use effect") }, []) return ( <div>{n} <button onClick={onClick}>+1</button> </div> ) } export default App
二.通过useEffect模拟/实现更新
细节:第2个参数填"要更新的"变量,比如在n更新时执行useEffect
1' 只有1个变量时:
useEffect(() => { console.log("n变了") }, [n])
2' 有多个变量时:
useEffect(() => { console.log("n或者m变了") }, [n, m]) 等价于: useEffect(() => { console.log("state变了") }) 不写的意思是，任何一个state变化都会执行useEffect函数
三.通过useEffect模拟/实现组件将死
每次点击hide时打印'Child 销毁了'
逻辑: 在useEffect函数里return另外一个函数，return的函数就是要死的。
import React, { useEffect, useState } from "react" const App = props => { //constructor const [childVisible, setChildVisible] = useState(true) //默认看得见 const hide = () => { setChildVisible(false) } const show = () => { setChildVisible(true) } //return就是render return ( <div> //如果是true就隐藏，如果是false就显示 {childVisible ? <button onClick={hide}>hide</button> : <button onClick={show}>show</button>} //如果是<Child />就显示，否则不显示 {childVisible ? <Child /> : null} </div> ) } const Child = props => { useEffect(() => { console.log("渲染或者变化了") return () => { console.log('Child 销毁了') } }) return ( <div>Child</div> ) }
细节
1.不能这样写:onClick={setChildVisible(false)}
onClick只接收函数，setChildVisible(false)返回值是undefined,undefined赋给onClick,onClick有个屁用，基础不扎实不要瞎写。
2.show是用来做函数名的，不是用来做变量的。
其它生命周期怎么模拟？
\
\
模拟render:函数组件的return就是render,返回值就是render的返回值。 其它.当需要return复杂逻辑时，return可以直接返回一个函数，将复杂逻辑写在函数里:
注意:x一定要返回div! 在x返回div前可以做任何事情 标签名最好都大写，防止跟原生的标签冲突。 const X = () => { //const n = 1+1 复杂逻辑 return <div>x</div> } const App = props =>{ return X() }
2.不光return x,我还return另外一个函数，把2个函数拼在一起:
标签名最好都大写，防止跟原生的标签冲突
const X = () => { const n = 1+1 return <div>x</div> } const Y = () => { const n = 1+1 return <div>y</div> } const App = props =>{ return <> <X></X> <Y></Y> </> }
