react--Hooks

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

猜你喜欢