import React, { useState } from 'react'; const App = () => { // 相当于在App函数组件是定义一个state数据，变量名为 count,修改此count的值的方法为setCount // 写法1：值 // let [count, setCount] = useState(100) // 有的时候，在项目中的初始数据，要经过一系列的运算才能出来的初始值，这时候就可以使用函数的写法 // 写法2：函数 let [count, setCount] = useState(() => 100) const addCount = () => { setCount(count + 1) } return ( 
{count}
++++
 ); } export default App;

import React, { useState } from 'react'; const App = () => { let [count, setCount] = useState(() => 100) const addCount = () => { // 并发处理数据的完整性得不到保证 // setCount(count + 1) // 100+1 // setCount(count + 1) // 100+1 // setCount(count + 1) // 100+1 // 并发处理 -- 推荐写法，这样写数据的完整性可靠的 setCount(v => v + 1) setCount(v => v + 1) setCount(v => v + 1) } return ( 
{count}
++++
 ); } export default App;

import React, { useState } from 'react'; const App = () => { let [username, setUsername] = useState('') let [password, setPassword] = useState('') return ( 
 {/* 受控组件 */}  setUsername(e.target.value)} /> setPassword(e.target.value)} />
 ); } export default App;

import React, { useState } from 'react'; // 在react中，定义的函数是以use开头，则认为它就是一个自定义hook函数 // 在自定义hook函数中，可以调用内置hook function useInput(initialValue = '') { let [value, setValue] = useState(initialValue) return { value, onChange: e => setValue(e.target.value.trim()) } } const App = () => { let usernameInput = useInput('') let passwordInput = useInput('') return ( 
 {/* 受控组件 */} 
 ); } export default App;

import { useState } from 'react'; // 在react中，定义的函数是以use开头，则认为它就是一个自定义hook函数 // 在自定义hook函数中，可以调用内置hook const useInput = (initialValue = '') => { let [value, setValue] = useState(initialValue) return { value, onChange: e => setValue(e.target.value.trim()) } } export default useInput

import React from 'react'; import useInput from './hook/useInput'; const App = () => { let usernameInput = useInput('') let passwordInput = useInput('') return ( 
 ); } export default App;

import React, { useState } from 'react'; const App = () => { let [count, setCount] = useState(100) const addCount = () => setCount(count + 1) console.log('App -- 要求此处只打印一次'); return ( 
App组件 --- {count}
++++
 ); } export default App;

import React, { useState, useEffect } from 'react'; const App = () => { let [count, setCount] = useState(100) const addCount = () => setCount(count + 1) // 模拟：componentDidMount componentDidUpdate（可以调用多次） useEffect(() => { console.log('App -- useEffect'); }) return ( 
App组件 --- {count}
++++
 ); } export default App;

import React, { useState, useEffect } from 'react'; const App = () => { let [count, setCount] = useState(100) const addCount = () => setCount(count + 1) // 模拟：componentDidMount（可以调用多次） // 参数2：依赖项，如果为空数据，则只执行1次 // 一般在这样的写法中，完成网络请求 useEffect(() => { console.log('App -- useEffect'); }, []) return ( 
App组件 --- {count}
++++
 ); } export default App;

import React, { useState, useEffect } from 'react'; const App = () => { let [count, setCount] = useState(100) let [name, setName] = useState('') const addCount = () => setCount(count + 1) // 下面这种写法，也可以实现相同的功能 // let [count, setCount] = useState({ num: 100 }) // const addCount = () => setCount({ num: count.num + 1 }) // const addCount = () => setCount(v => ({ num: v.num + 1 })) // 参数2中依赖项，进行填值,只要依赖项中的值，发生改变，则进行触发 // componentDidMount componentDidUpdate useEffect(() => { console.log('App -- useEffect'); // 这里的依赖项中只填了count，所以只有count发生改变，才会触发当前函数 }, [count]) // 对依赖项的使用，可以像下面这样分开写，也可以写在同一个数组中 // useEffect(() => { // console.log('App -- useEffect'); // }, [name]) return ( 
 setName(e.target.value)} />
App组件 --- {count}
++++
 ); } export default App;

import React, { useState, useEffect } from 'react'; const App = () => { let [count, setCount] = useState(100) let [name, setName] = useState('') const addCount = () => setCount(count + 1) // 有依赖项,只要count改变，则触发 // componentDidMount componentDidUpdate componentWillUnmout useEffect(() => { console.log('App -- useEffect'); // 返回回调函数中就是 componetWillUnMount // 在执行下一个 effect 之前，上一个 effect 就已被清除 return () => { console.log('componentWillUnmout'); } }, [count]) return ( 
 setName(e.target.value)} />
App组件 --- {count}
++++
 ); } export default App;

import React, { useState, useEffect } from 'react'; const App = () => { let [count, setCount] = useState(100) let [name, setName] = useState('') const addCount = () => setCount(count + 1) return ( 
 setName(e.target.value)} />
App组件 --- {count}
 { count > 103 ? null :  } ++++
 ); } function Child() { // componentDidMount componentWillUnmout -- 一般模拟组件的销毁 useEffect(() => { console.log('child -- componentDidMount'); return () => { console.log('child -- componentWillUnmout'); } }, []) return ( 
Child
 ) } export default App;

import React, { useState, useEffect } from 'react'; import { get } from '@/utils/http' const App = () => { let [films, setFilms] 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：JavaScript面试Module Federation实现原理详解_javascript技巧_
                                                                
下一篇：JavaScript iframe 实现多窗口通信实例详解_javascript技巧_