Heima前端React18入门到实战

【Hooks优先】、【React核心内容】、【立刻上手】

• Course Point

1. 前后台项目（PC + Mobile
2. Skill Stack: React18、Redux、AntD
3. React + TS
   0
   

create-react-app是快速创建React开发环境的工具，底层由webpack构建，封装了配置细节，开箱即用
执行命令： npx create-react-app react-basic

1. npx Node.js工具命令，查找并执行后续的包命令
2. create-react-app 核心包，用于创建React项目

www.babeljs.io

React中获取DOM

// React中获取DOM
// 1. useRef生成ref对象，绑定到DOM标签
// 2. DOM可用的时候，ref.current获取DOM
// 渲染完毕之后DOM生成之后才可用
function App() {
    const inputRef = useRef(null)
    const showDom = () => {
        console.log('output-> inputRef.current::: ', inputRef.current)
        console.dir(inputRef.current) // 展开显示
    }
    return (
        <>
            <input type='text' ref={inputRef}/>
            <button onClick={showDom}>获取DOM</button>
        </>
    )
}
 
export default App;
 

组件通信

使用状态提升实现兄弟组件通信

useEffect的基本使用

useEffect的概念理解 -> 组件渲染完毕之后就会触发，整个过程属于“只由渲染引起的操作”

const URL = 'http://geek.itheima.net/v1_0/channels'
 
function App() {
    const [channels, setChannels] = useState([])
    useEffect(() => {
        // 额外的操作 - 获取频道列表
        async function getList() {
            let response = await fetch(URL);
            let res = await response.json();
            console.log('data::: ', res.data.channels);
            setChannels(res.data.channels);
        }
 
        getList().then(r => console.log('r', r))
    }, []); // 空数组 - 页面渲染完毕之后只会执行一次
    return (<>
        <hr/>
        <ul>
            {
                channels.map(item => ( <li key={item.id}> {item.name}</li>))
            }
        </ul>
        <hr/>
        this is App
    </>)
}
 
 
export default App;

自定义Hook函数案例

// 解决思路： 自定义Hook
// 1. 声明一个以use大头的函数
// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3. 把组件中用到的状态或回调 return出去(以对象或者数组
// 4. 在哪个组件中要使用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
 
 
function useToggle() {
    // 可复用的逻辑代码
    const [value, setValue] = useState(true);
    const toggle = () => setValue(!value);
 
    return {
        value,
        toggle
    }
}
function App() {
    const {value, toggle} = useToggle()
    return (<>
        <div>
            {value && <div>This is Div</div>}
            <button onClick={toggle}>
                Toggle
            </button>
        </div>
    </>)
}
 
 
export default App;
 
 

美团项目案例