zoukankan      html  css  js  c++  java
  • react--Hooks

    React Hooks 是 React 16.7.0-alpha 版本推出的新特性

    优点

    1. 无状态组件function不能带state 如果组件里需要用state,只能用class
    2. 没有this指向的问题
    3. 减少了层级嵌套,
    4. 代码简洁
    5. 不用调用各种生命周期

    新建hooks文件夹 hooks/test1.js     hooks/useState.js

    hooks/test1.js

    import React from 'react';
    
    export default class Test1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {
          count: 0
        }
      }
    
      render(){
        return (
          <div>
            <p onClick={() => this.setState({count: this.state.count + 1})}>点我试试{this.state.count}</p>
          </div>
        )
      }
    }

    hooks/useState.js

    import React, {useState} from 'react';
    
    export default function UseStateTest(){
      const [count, setCount] = useState(0);
      const [str, setStr] = useState('');
    
      return (
        <div>
          <p onClick={() => setCount(count + 1)}>点我试试{count}</p>
          <p onClick={() => setStr(str + 1)}>点我试试{str}</p>
        </div>
      )
    }

    router/index.js修改如下

    import React from 'react';
    import {Switch, Route} from "react-router-dom";
    
    import Home2 from '../pages/Home2';
    import OnePage from '../pages/OnePage';
    import TwoPage from '../pages/TwoPage';
    import This from '../pages/This';
    import Mount from '../pages/Mount';
    import HooksTest1 from '../hooks/test1';
    import HooksUseState from '../hooks/useState';
    
    const Routers = (
        <Switch>
            <Route path="/" exact component={Home2} />
            <Route path="/onePage" component={OnePage} />
            <Route path="/twoPage/:id" component={TwoPage} />
            <Route path="/this" component={This} />
            <Route path="/mount"  component={Mount} />
            <Route path="/hooksTest1" component={HooksTest1} />
            <Route path="/hooksUseState" component={HooksUseState} />
        </Switch>
    );
    
    export default Routers

    启动项目http://localhost:3000/#/hooksTest1   点击“点我试试”,这是传统的开发方式

    http://localhost:3000/#/hooksUseState 看代码 是不是简单明了

    const [count, setCount] = useState(0);
    count是变量,默认值0,写法是useState(0);

    const [str, setStr] = useState('');
    str是变量,默认值'’,写法是useState('');

    Hooks实战--封装一个input组件,可供很多场景使用
    新增hooks/inputValue.js文件
    import {useState, useCallback} from 'react';
    
    export default function useInputValue(initialValue){
      const [value, setValue] = useState(initialValue);
      const onChange = useCallback(function(event){
        setValue(event.currentTarget.value)
      }, []);
    
      return {
        value,
        onChange
      }
    }
    
    
    

    hooks/useState.js修改如下
    import React, {useState} from 'react';
    import useInputValue from "./inputValue";
    
    export default function UseStateTest(){
      const [count, setCount] = useState(0);
      const [str, setStr] = useState('');
    
      const name = useInputValue("huangJie");
    
      return (
        <div>
          <p onClick={() => setCount(count + 1)}>点我试试{count}</p>
          <p onClick={() => setStr(str + 1)}>点我试试{str}</p>
          <input {...name} />
        </div>
      )
    }


    inputValue.js里新增了useCallback API字面意思就是通过回调的方式setValue,适合的场景有很多

    喜欢函数式编程的小伙伴就尽情的使用react--Hooks吧,会很爽的
    另附react官方HooksAPI


     
  • 相关阅读:
    LeetCode 123. Best Time to Buy and Sell Stock III (stock problem)
    精帖转载(关于stock problem)
    LeetCode 122. Best Time to Buy and Sell Stock II (stock problem)
    LeetCode 121. Best Time to Buy and Sell Stock (stock problem)
    LeetCode 120. Triangle
    基于docker 搭建Elasticsearch5.6.4 分布式集群
    从零开始构建一个centos+jdk7+tomcat7的docker镜像文件
    Harbor实现容器镜像仓库的管理和运维
    docker中制作自己的JDK+tomcat镜像
    docker镜像制作---jdk7+tomcat7基础镜像
  • 原文地址:https://www.cnblogs.com/huangjie2018/p/10704089.html
Copyright © 2011-2022 走看看