React-Hooks

笔记来自
hooks
技术胖视频
木牛木马视频

前言

• hooks是一种出现在16.8之后的写法
• 他把数据和操作方法进行了分离，类似于Java的bean结构
• 不能用class extend component的写法了

只做了解，不建议使用，理由如下

• 与Next不兼容
• 与immutable不兼容

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

useState的使用

import React, { useState } from 'react';
function App(){
    // 这个是数组结构，第一个就是数据，第二个是修改数据的方法，把新数据传进去就行
    // useState传参就是初始化数据，不传就是空
    const [ count , setCount ] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            // 这里一定是个函数
            <button onClick={()=>{setCount(count+1)}}>click me</button>
        </div>
    )
}
export default App;

useEffect的使用

• 这个是所有生命周期函数的集合体
• 他是异步执行的，不像生命周期是同步的
• 可以写多个

import React, { useState , useEffect } from 'react';
function App(){
    const [ count , setCount ] = useState(0);

    // 只有一个参数表示数据更新就会执行，包括第一次数据加载componentDidMount
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
    })

    // 表示只执行一次，即第一次数据加载componentDidMount
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
    },[])

    // 对某个数据更新的监听
    useEffect(() => {
       console.log(`name数据变化了`)
    },[name])
    useEffect(() => {
       console.log(`age数据变化了`)
    },[age])

    // 销毁组件是怎么写
    useEffect(() => {
       return ()=>{
          console.log(`组件被销毁了`)
       }
    },[])

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
        </div>
    )
}
export default App;

• 发现了没有，还不如直接写生命周期呢，乱七八糟的

UseRef的使用

import React, { useRef ,useState,useEffect } from 'react';
function App(){
    const inputEl = useRef(null)
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello ,useRef"
    }
    return (
        <div>
            {/*保存input的ref到inputEl */}
            <input ref={inputEl} type="text"/>
            <button onClick = {onButtonClick} >在input上展示文字</button>
        </div>
    )
}
export default App

其他

• useContext
• useReducer
• useMemo
• useCallback
• 算了不了解了，看多了头疼，总之，不建议使用