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
  • 算了不了解了,看多了头疼,总之,不建议使用
posted @ 2020-06-09 10:06  一个年轻淫  阅读(158)  评论(0编辑  收藏  举报