精华内容
下载资源
问答
  • React Hooks

    2019-05-22 14:31:21
    关于React Hooks的文章太多了,主要是React Hooks刚推出时太火了,所以我这里仅仅做个搬运工吧,推荐几篇不错的文章好了。 十个案例学会 React Hooks 30分钟精通React Hooks React Hooks react h...

    首先打个广告,系列文章:

    1. 古老的React mixins
    2. HOC(高阶组件)
    3. render props
    4. React Hooks

    下面进入正题:

    关于React Hooks的文章太多了,主要是React Hooks刚推出时太火了,所以我这里仅仅做个搬运工吧,推荐几篇不错的文章好了。

    1. 十个案例学会 React Hooks
    2. 30分钟精通React Hooks
    3. React Hooks
    4. react hooks进阶与原理

    第一篇文章开头总结的很到位:

    1.你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? ——拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。

    2.你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? ——拥有了Hooks,生命周期钩子函数可以先丢一边了。

    3.你在还在为组件中的this指向而晕头转向吗? ——既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this。

    这也是推出React Hooks的重要原因吧。

    另外推荐阅读:V8 将为 React hooks 改进数组解构的性能

    转载于:https://juejin.im/post/5ce53c636fb9a07f035711af

    展开全文
  • React hooks

    2020-12-06 20:30:08
    React hooks React-hooksReact 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。 参考:https://reactjs.org/docs/hooks-intro.html React Hooks 优势: 简化组件逻辑 复用状态逻辑 无需使用...

    React hooks

    React-hooks是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。
    参考:https://reactjs.org/docs/hooks-intro.html
    React Hooks 优势:

    • 简化组件逻辑
    • 复用状态逻辑
    • 无需使用类组件编写

    常用 hook:

    • useState
      const [state, setState] = useState(initialState);
    • useEffect
      类组件 componentDidMount、componentDidUpdate 和 componentWillUnmount
      需要清除的副作用
    • useRef

    注:UseState useEffect useRef 三个都需要从react中引入。

    UseState的使用:

    import React,{useState} from 'react'
    在函数组件内使用,定义数据
    /*
      let[状态的值,修改状态的方法]=useState(状态的初始值)
    */
    
    let [data,setName]=useState({name:'浩克',age:18})
     let [show,setShow]=useState(true)
    往子组件传数据
    <Child data={data}></Child>
    点击改变数据
    <button onClick={()=>{
       setName({
          name:'疯狂浩克',
         age:data.age
       })
    }}>点击变身</button>
    

    useEffect的使用:

    import React,{useState,useEffect} from 'react'
    三种事件状态在一块的写法 中括号为触发函数的值
    第一次加载会触发挂载和更新,然后改变数据三种状态都会触发(副作用)
    // useEffect(()=>{
        //     console.log('挂载 更新')
        //     return()=>{
        //         console.log('卸载')
        //     }
    // },[age])
    三种事件状态分开写 
    挂载阶段 页面初次渲染触发
    useEffect(()=>{
            console.log('挂载')
    },[])
    卸载 点击卸载后触发
    useEffect(()=>{
       return()=>{
             console.log('卸载')
            }
    },[])
    更新 数据发生改变时触发
    useEffect(()=>{
          console.log('更新')
    },[age])
    

    useRef的使用:

    import React,{useState,useEffect,useRef} from 'react'
    在函数内定义
    let ageP=useRef()
    模板中使用ageP
    <h2 ref={ageP}>age:{age}</h2>
    挂载中使用ageP
    useEffect(()=>{
            console.log(ageP)
     })
    

    Hook 使用规则

    • 只在最顶层使用 Hook
    • 只在 React 函数中调用 Hook
      React 函数组件中
      React Hook 中 - 我自己定义 hook 时,可以调用别的hook
    • 所有的 hook 必须 以 use
    展开全文
  • react hooks

    2019-10-27 12:09:14
    react hooks学习 今天学习了一下react hooks, 写一些自己的学习体会. 简单说react hooks 就是用函数来代替之前的class, 然后用useState和useEffect方法来代替之前的state, setState 和 生命周期函数 state的新写法 ...

    react hooks学习

    今天学习了一下react hooks, 写一些自己的学习体会.

    简单说react hooks 就是用函数来代替之前的class, 然后用useState和useEffect方法来代替之前的state, setState 和 生命周期函数

    state的新写法

    例如:

    function App() {
    	const [count, setCount] = useState(0);
    	// 这里count相当于state里的一个状态, setCount相当于setState
    	return(
    		<div>
    			<button onClick={() => {setCount(count + 1)}}>
    				增加
    			</button>
    		</div>
    	)
    }
    // 以上就是最简单的一个hooks
    

    生命周期的新写法

    function() {
    	const [count, setCount] = useState(0);
    	useEffect(() => {
    		console.log('相当于componentDidMount与compoenntDidUpdate组合')
    	})
    	// 如果要实现componentDidUnMount
    	useEffect(() => {
    		
    	})
    	return(
    		<div>
    			<button onClick={() => {setCount(count + 1)}}>
    				增加
    			</button>
    		</div>
    	)
    }
    
    展开全文
  • react-ReactHooks必不可少的ReactHooks的集合

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,739
精华内容 3,095
关键字:

reacthooks