React Hooks常用语法及操作

React Hooks是react v16.8引入的新特性，他允许你在不写class的情况下操作state 和react的其他特性。

使用State

如何在function component中使用state？

// index.js
import React , {useState , useCallback} from 'react';

function Count(){
  // init state
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(()=>{
      setCount(count + 1);
  });
  
  return(
      <>
          <p>You clicked {count} times</p>
          <Button onClick={handleClick}>Click me</Button>
      </>
  );
}

父组件向子组件通信,两种方法：

使用props,因为react是单向数据流,props自然是最通用的方法

// parent.js
import React , {useState , useCallback} from 'react';
import Counter from 'path/children';

function Parent(){
const [count, setCount] = useState(0);
const handleClick = useCallback(()=>{
      setCount(count + 1);
});
    return(
      <>
          <Counter data={count}></Counter>
          <Button onClick={handleClick}>Click me</Button>
      </>
  );
};

// children.js
import React from 'react';

export default function Children(props){
    return(
      <div>You clicked {props.count} times</div>
    );
}

使用 Context

// parent.js
import React , {useState , useCallback} from 'react';
import myContext from 'path/createContext';
import Counter from 'path/children';

function Parent(){
  const [count, setCount] = useState(0);
  const handleClick = useCallback(()=>{
      setCount(count + 1);
  });
  return(
      const [count, setCount] = useState(10);
      return (
      <>
          <myContext.Provider value={count}>
              <Counter/>
          </myContext.Provider>
      </>
      );
  );
};

// createContext.js
import { createContext } from 'react';

const myContext = createContext(null);
  
export default myContext;

// children.js
import React, { useContext } from 'react';
import myContext from '../createContext';
import { Button } from 'antd';

export default function Counter(props) {
const count = useContext(myContext); // 得到父组件传的值
return (
  <div>
    <h4>我是子组件</h4>
    <p>这是父组件传过来的值：{count}</p>
  </div>
);
}

子组件向父组件通信

这里只使用Context的方式进行演示

  // parent.js
  import React , {useState , useCallback} from 'react';
  import myContext from 'path/createContext';
  import Counter from 'path/children';
  
  function Parent(){
    const [count, setCount] = useState(0);
    const handleClick = useCallback(()=>{
        setCount(count + 1);
    });
    return(
        const [count, setCount] = useState(10);
        const handleClick = useCallback(() => {
            setCount(count + 1);
        });
        return (
        <>
            <myContext.Provider value={count}>
                <Counter parent={handleClick}/>
            </myContext.Provider>
        </>
        );
    );
  };

// createContext.js
import { createContext } from 'react';

const myContext = createContext(null);
  
export default myContext;

// children.js
import React, { useCallback, useContext } from 'react';
import myContext from '../createContext';
import { Button } from 'antd';

export default function Counter(props) {
const count = useContext(myContext); // 得到父组件传的值
const handleSubmit = useCallback(() => {
  props.parent();
});
return (
  <div>
    <h4>我是子组件</h4>
    <p>这是父组件传过来的值：{count}</p>
    <Button onClick={handleSubmit}>确定</Button>
  </div>
);
}