Reactv16.7.0-alpha.2 Hooks学习

superPershing 发布于2019-08-23 14:40 / 1995人阅读

摘要：的来源钩子，顾名思义，为了解决在函数组件中使用和生命周期，同时提高业务逻辑复用。函数组件等同于一个纯的专门用作渲染的函数，我们知道，在函数组件中，我们无法使用和生命周期，这也是为了解决的问题。

Hooks的来源

Hooks => 钩子，顾名思义，为了解决在函数组件（Function Component）中使用state和生命周期，同时提高业务逻辑复用。

Function Component == Puer Render Function 函数组件等同于一个纯的专门用作渲染的函数，我们知道，在函数组件中，我们无法使用state和生命周期，这也是Hooks为了解决的问题。

第一个API: useState

import { useState } from react // 引入
const [count, setCount] = useState(0)    
相当于
this.state ={ count = 0} 所以 useState(arg)放数组 字符串 对象都可以，就是起到一个初始化state的作用
setCount 相当于 this.setState({count: count})
count = count + 1 这样的写法是错的，不能直接修改state的值，需要使用setCount(value)
我们可以声明多个状态

第二个API: useEffect

这个函数是为了解决当状态或者传入的props发生变化后，需要做出的逻辑处理

比如： count + 1 后，就会触发

useEffect( () => {
// 逻辑处理在这里
}, [count])  //第二个参数是绑定需要监听变化的参数

下面是一个完整的例子

父组件中传入的props value 每秒 + 1 父组件就不贴代码了，文末有完整代码地址
这个项目里包含自定义Hook 以及useEffect的触生命周期，包含自身state以及父组件传入prop改变后，useEffect的用法

import React from "react";
import { useState, useEffect } from "react";

// 自定义hooks
function diyHooks (value) {

  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if(value % 2 === 0) {
      setFlag(true)
    } else {
      setFlag(false)
    }
    console.log(flag)
  }, [value])

  return flag;

}


function Try (props) {

  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
  const value = props.value
  const flag = diyHooks(props.value)

  useEffect(() => {
    console.log("count", count);
  }, [count])

  useEffect(() => {
    console.log("number", number);
  }, [number])


  useEffect(() => {
    console.log("props", value)
  }, [value])

  return (
    
      {flag === true ? "true" : "false"}
      {value}
      
    
  )
}

export default Try;

关于自定义hooks，我写了一个react-hooks  介绍了React Hooks的简单用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100961.html

react hooks初体验

摘要：此优化有助于避免在每个渲染上进行昂贵的计算。同样也是一个函数，接受两个参数，第一个参数为函数，第二个参数为要比对的值，返回一个值。同理，第二个参数传入的值没有更新时，不会执行。以上代码的地址为初体验什么是Hooks？Hooks是react即将推出的功能，它允许您在不编写类的情况下使用状态和其他React功能。我的理解就是可以用写无状态组件的方式去编写拥有状态的组件。遗憾的是，正式版1...

anyway 2019-08-23 14:14 评论0 收藏0
React Hooks实现异步请求实例—useReducer、useContext和useEffec

摘要：本文是学习了年新鲜出炉的提案之后，针对异步请求数据写的一个案例。注意，本文假设了你已经初步了解的含义了，如果不了解还请移步官方文档。但不要忘记和上下文对象可以看做是写法的以及三个钩子函数的组合。本文是学习了2018年新鲜出炉的React Hooks提案之后，针对异步请求数据写的一个案例。注意，本文假设了：1.你已经初步了解hooks的含义了，如果不了解还请移步官方文档。（其实有过翻译...

Code4App 2019-08-23 13:49 评论0 收藏0
ReactV16.3，即将更改的生命周期

摘要：我们目前的计划是为不安全生命周期引入别名，和。从现在开始，只有新的生命周期名称将起作用。从版本开始，更新以响应更改的推荐方法是使用新的静态生命周期。注释：本文是根据React的官方博客翻译而成（文章地址：https://reactjs.org/blog/2018...）。主要讲述了React之后的更新方向，以及对之前生命周期所出现的问题的总结，之后的React将逐步弃用一些生命周期和...

wendux 2019-08-22 16:28 评论0 收藏0