无论是在react 还是在react native中，Hook 还是相当有用的。

官方链接

Hook 使用注意的事项

1. hook 不能使用在class组件中
2. 只能在函数最外层调用Hook， 不要在循环，条件判断或者子函数中调用
3. 只能在react 的函数组件中调用Hook， 不要在其他 JavaScript 函数中调用

useState

使用方法

const [state, setState] = useState(0)

更新 state 数据 需要调用 setState， 有两种写法

// 1. 直接调用setState中传入更新的数据
setState(state + 1)

// 2. 对于复杂的更新逻辑使用函数式更新
setState( () => state + 1)

useState 惰性初始化

1. initialState参数 只有在组件初始化的时候才会调用，后续渲染时会被忽略
2. 复杂初始state的定义 组件初始化的时候使用initiateState 属性。 组件接收以后使用 函数接收初始值

useEffect

 useEffect(() =>{
    console.log(userNameSearchText)
  }, [userNameSearchText])

  useEffect(()=>{
    console.log("开始监听")
    return () => {
      console.log("结束监听")
    }
  })

useEffect 实现声明周期函数

使用class组件

componentDidMount 监听组件首次渲染 componentWillUnmout 组件被卸载时调用

export class Home extends Component {
  
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  componentWillUnmount(){}

  componentDidUpdate(prevProps, prevState, snapshot) {
  }

  render() {
    return (
      <View style={}>
        
      </View>
    );
  }
}

export default Home;

使用函数式组件 + Hook

function Demo(props) {
	
	const [userId, detailId] = props

	useEffect(() => {
		console.log("mounted")

		return () => {

			console.log("unmount")
		} 
	}, [])

	useEffect(() => {
		// userId 变化后的处理
	}, [userId])

	useEffect(() => {
		// detailId 变化后的处理
	}, [detailId])


}
// 第二个参数为空数组时，表示该副作用不依赖任何的值变化，只会在组件完成初次渲染后执行一次