ReactNative Hook

1 Hook是什么

Hook可以在不使用class的情况下在函数组件中使用React的特性。

2 useState

useState 就是一个 Hook ，useState 用于在函数组件中添加内部 state。

// 函数组件
import React, { useState } from 'react';

const demo = () => {
  const [text, setText] = useState('啊');
  
  return (
    <div onClick={() => { setText('哈'); }}>
      <p>{text}</p>
    </div>
  )
}
// 同等于class

代码中申明了变量 text，默认值为 啊，可以通过 setText 来改变它的值。

3 useEffect

useEffect 可以在函数组件中达到生命周期函数的作用，可以把它看作componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

import React, { useState, useEffect } from 'react';

const demo = () => {
  const [text, setText] = useState('啊');

  useEffect(() => {
    setText('咦');
  })

  return (
    <div onClick={() => { setText('哈'); }}>
      <p>{text}</p>
    </div>
  )
}

useEffect会在每次渲染后都执行，如果只想在某个或某些变量发生更改时执行，只需在useEffect中传递第二个参数 [变量名]。

import React, { useState, useEffect } from 'react';

const demo = () => {
  const [text, setText] = useState('啊');
  const [text2, setText2] = useState('啊');
  const [text3, setText3] = useState('啊');

  useEffect(() => {
    setText('咦');
  },[text, text2])

  return (
    <div onClick={() => { setText('哈'); }}>
      <p>{text}</p>
    </div>
  )
}

如上，这样useEffect只会在text和text2发生改变时执行，text3发生改变时不执行。

注意：如果第二个参数传递的为空数组，那么它只会在组件挂在和卸载的时候执行。

如果组件卸载时需要清除，那么直需要返回一个清除函数，效果同class组件中的componentWillUnmount。

import React, { useState, useEffect } from 'react';

const demo = () => {
  const [text, setText] = useState('啊');
  const [text2, setText2] = useState('啊');
  const [text3, setText3] = useState('啊');

  useEffect(() => {
    setText('咦');
    return () => {
    	// 清除函数 用于组件卸载时做清除操作
    }
  },[text, text2])

  return (
    <div onClick={() => { setText('哈'); }}>
      <p>{text}</p>
    </div>
  )
}

在一个函数组件中useEffect可以写多个

import React, { useState, useEffect } from 'react';

const demo = () => {
  const [text, setText] = useState('啊');
  const [text2, setText2] = useState('啊');
  const [text3, setText3] = useState('啊');

  useEffect(() => {
    setText('咦');
    return () => {
    	// 清除函数 用于组件卸载时做清除操作
    }
  },[text, text2])
  
  useEffect(() => {},[text])

  return (
    <div onClick={() => { setText('哈'); }}>
      <p>{text}</p>
    </div>
  )
}

4 自定义Hook

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。
通过自定义 Hook，名称必须用use开头。

import React, { useState, useEffect } from 'react';

const useCommon = (text) => {
  const [val, setVal] = useState(false);
  useEffect(() => {
    if (val) {
      setVal(true)
    }
  })
  return val
}

const demo = () => {
  const text = useCommon('啊');

  return (
    <div>
      <p>{text}</p>
    </div>
  )
}

const demo2 = () => {
  const text = useCommon('哈');

  return (
    <div>
      <p>{text}</p>
    </div>
  )
}

5 获取redux数据 useSelector

import { useSelector } from 'react-redux';
export default () => {
  const user = useSelector((state) => state.user);
};

6 获取redux的dispatch useDispatch

import { useDispatch } from 'react-redux';
export default () => {
  const dispatch = useDispatch();
};

7 获取navigation对象 useNavigation

import { useNavigation } from '@react-navigation/native';
export default () => {
  const navigation = useNavigation();
};

8 使用ref useRef

import React, { useRef } from 'react';
import { View } from 'react-native';
export default () => {
  const refView = useRef();
  return (
  	<View ref={refView }></View>
  );
};

9 子组件暴露方法给父组件 forwardRef useImperativeHandle

// 子组件
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { View } from 'react-native';
export default forwardRef(({}, ref) => {
  	const [val, setVal] = useState('');
  	// 暴露方法给父组件
	useImperativeHandle(ref, () => {
	  return {
	     _setVal(v) {
	       setVal(v);
	     },
	   };
	 });
});

// 父组件
import React, { useRef } from 'react';
import { View } from 'react-native';
export default () => {
  const refView = useRef();
  refView.current._setVal('val');
  return (
  	<ChildComponents ref={refView } />
  );
};