一文带你了解React中的函数组件_React_

 // 写法一 const Hello = (props) => { return 
{props.message}
 } // 写法二 const Hello = props =>
{props.message}
 // 写法三 function Hello(props) { return 
{props.message}
 }

class App extends React.Component { constructor(props) { super(props); this.state = { n: 0 } } addNum = () => { this.setState({n: this.state.n + 1}) } render() { return ( 
n:{this.state.n}n+1
 ) } } 

const App = props => { const [n,setN] = React.useState(0) function addNum(){ setN(n + 1) } return ( 
 {n} +1
 ) } 

useEffect(() => { // 模拟componentDidMount 首次渲染 console.log('use effect') },[]) // 空数组必须写 

const [n, setN] = React.useState(0) useEffect(() => { // 模拟 componentDidUpdate console.log('n 变化了') },[n]) // 数组里面可以写多个参数表示监听多个变量 useEffect(() => { // 模拟 componentDidUpdate console.log('任意属性变更了') }) // 不写数组表示监听所有 useState 的变量 // 但是这样在第一次渲染时也会触发函数的执行 解决方法使用自定义Hook 见下一标题 

 useEffect(() => { return () => { console.log('Child 销毁了') } }) // 返回一个函数 在销毁时执行 

// 模拟render里面写逻辑 const X = (props) => { console.log('我是要写的逻辑') return ( 
逻辑模拟
 ) } const App = props => { let [childVisible, setChildVisible] = useState(true) const changeVisible = () => { setChildVisible(!childVisible) } return ( 
 {childVisible ? {childVisible} : hide} {/*{childVisible ?  : null}*/} 
 ) } // 一个函数便是一个组件 

const App = props => { const [n, setN] = useState(0) const onClick = () => { setN(n + 1) } const [nUpdateCount, setNUpdateCount] = useState(0) useEffect(() => { // 初次渲染就执行 + 1 setNUpdateCount(nUpdateCount + 1) }, [n]) useEffect(() => { // 初次渲染就执行 判断是否大于1 if(nUpdateCount > 1){ console.log('n变了') } },[nUpdateCount]) return ( 
 n值变成了:{n} n+1
 ) } // 通过使用两次 useEffect 第一个触发第二个 useEffect 函数计数，大于0便是n值变化了 

const useX = (fn, dep) => { // 这就是自定义 Hook 这就可以抽离成别的文件 const [count, setCount] = useState(0) useEffect(() => { setCount(x => x + 1) }, [dep]) useEffect(() => { if (count > 1) { fn() } }, [count,fn]) } const App = props => { const [n, setN] = useState(0) const onClick = () => { setN(n + 1) } useX(() => { console.log('n 变化了') }, n) return ( 
 n值变成了:{n} n+1
 ) } 

class App extends React.Component { const App = props = > { constructor() { const[n, setN] = React.useState(0); super(); const addN = () = > { this.state = { setN(n + 1); n: 0 } }; return ( } < div > { n } addN = () = > { < button onClick = { addN } > +1 < /button>