react--Hooks

发布时间：2020-12-15 20:18:51 所属栏目：百科来源：网络整理

导读：React Hooks 是 React? 16.7.0-alpha ?版本推出的新特性优点无状态组件function不能带state 如果组件里需要用state，只能用class 没有this指向的问题减少了层级嵌套，代码简洁不用调用各种生命周期新建hooks文件夹 hooks/test1.js? ? ?hooks/useState

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

优点

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

新建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,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!