React Hooks 项目实战

2019-07-17 admin

Hooks简介

HooksReact v16.7.0-alpha 中加入的新特性。它能够让函数组件拥有自己的statereact 16.8.0稳定版本支持Hooks,本文就是演示 Hooks 在项目中的使用示例,对于内部的原理这里就不做详细说明。

useState

import React, { useState  } from 'react';
function Example() {
    // 声明一个名为“count”的新状态变量
    const [count, setCount] = useState(0);

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

export default Example;

useEffect


import React, { useEffect  } from 'react';
function Example() {
    //生命周期中的componentDidMount
    useEffect(() => {
        console.log('componentDidMount')  
    },[]);
    //生命周期中的componentDidMount
    useEffect(() => {
        console.log('componentDidMount')
        return ()=>{ //componentWillUnmount
            console.log('componentWillUnmount')
        }
    },[]);
    //生命周期中的componentDidMount 和 componentDidUpdate
    useEffect(() => {
        console.log('类似于 componentDidMount 和 componentDidUpdate:')
    });
    return (
        <div></div>
    );
}

export default Example;

componentDidMount、componentDidUpdate、componentWillUnmount的使用方法

useMemo

import React, { useMemo  } from 'react';
export default ({a}) => {
    const exampleA = useMemo(() => <div>{a}</div>, [a]);  //当a的值 发生变化时候才会渲染
    return exampleA
}

useRef

import React, { useRef  } from 'react';

export default ({a}) => {
    const inputEl = useRef(null);
    return <input ref={ inputEl } type="text" />
}

react-router 获取路由参数

import React from 'react';
import { withRouter } from 'react-router-dom';

export default withRouter((props) => {
    return <div>{props.match.params.id}</div>
})

react-redux和redux-saga 的使用

import React, { useEffect } from 'react';
import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  return {
      list:state.list
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      getList:()=>{},//只是实例使用方式
  };
};
const useAddField = (props:Props) => {
  useEffect(()=>{
      console.log('----------第一次渲染')
      this.props.list();
      return ()=>{
        console.log('-------退出')
      }
  },[])   //componentDidMount
  console.log(props.list)  //redux里面的值
  return <div></div>
};
export default connect(mapStateToProps, mapDispatchToProps)(useAddField);

参考文档

React 官网

React Hooks FAQ

参考博客

[转载]原文链接:https://segmentfault.com/a/1190000019789992

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-70007.html

文章标题:React Hooks 项目实战

相关文章
优化RequireJS项目的相关技巧总结
本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将...
2017-03-27
vue项目使用WebViewJavascriptBridge
&lt;meta itemprop=“headline” content=“vue项目使用WebViewJavascriptBridge”&gt;&lt;meta itemprop=“datePublished” content=“2018...
2018-03-22
#react-native# Error: Command failed: gradlew.bat installDebug
这篇文章主要解决react-native中遇到的bug。 编译并运行 React Native 应用之前我们可以使用下面的方法清理gradlew 和之前的构建文件。 Error: Command failed: gradlew.bat in...
2019-02-28
配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境
前后端分离的项目开发中,我们有开发环境、测试环境、预生产环境和生产环境。 1、开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情况手动来切换接口地址。 2、打包时要部...
2018-09-08
使用 TypeScript 构建 Koa2 项目的最佳实践
the best practice of building Koa2 with TypeScript. 中文 usage clone repo. git clone git@github.com:DhyanaChina/koa2-type...
2018-02-27
vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开p...
2018-06-06
React水印组件,支持图片水印,文字水印
React水印组件,支持图片水印,文字水印。 安装 npm i --save react-watermark-module 用法 import ReactWatermark from &#x27;react-watermark-modul...
2018-01-09
React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
本文是学习了2018年新鲜出炉的React Hooks提案之后,针对异步请求数据写的一个案例。注意,本文假设了: 1.你已经初步了解hooks的含义了,如果不了解还请移步官方文档。(其实有过翻译的想法,不过印记中文一直在翻译,就是比较慢啦...
2018-12-01
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
React-Navigation 导航综合应用
本文由我们团队的 杨俊宁 组内分享后总结。 移动应用中最常见的导航风格可能是基于 tab 的导航。 可以在屏幕底部或顶部的标题栏下方(甚至取代标题栏)。 createStackNavigator 创建的 stack navigator...
2018-06-27
回到顶部