react hook

hook

作用： 可以让我们在函数式组件中添加state,也可以让我们使用部分生命周期钩子函数

useState useEffect

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


  const Item = ( props ) => {
    return   <li> { props.content } </li>
  }

  function HookComponent () {
    let  [count,setCount ] = useState( 0 )
    let [ list, setList ] = useState( [
      {
        id: 1,
        content: '敲代码1'
      }
    ])

    // console.log( count , setCount )


    useEffect ( () => {
      //执行副作用的函数
      document.title = count
    })

    return (
      <div>
        hook
        <button onClick = { () => { setCount( count += 1 ) }}> + </button>
        <p> { count } </p>
        <hr/>
        <button onClick = { () => {
          let newList = list.push({
            id: list.length + 1,
            content: 'Gabriel Yan'
          }) // 返回值是数字
          setList( list.concat(newList))
        }}> list +  </button>
        <ul>
          {
            list.map( item => {
              return <Item { ...item } key = { item.id} />
            })
          }
        </ul>
      </div>
    )
  }


  export default HookComponent

总结：

1. useState可以让我们在函数式组件中定义一个state和一个用来修改state的方法
   let [ count,setCount ] = useState( count的初始值 )

2. useEffect可以让我们在函数式组件中使用一个副作用（ 事件的订阅、dom操作 ）
   不需清除的副作用：
   我们只想在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作

      import React, { useState, useEffect } from 'react';
   
      function Example() {
        const [count, setCount] = useState(0);
   
        useEffect(() => {
          document.title = `You clicked ${count} times`;
        });
   
        return (
          <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
              Click me
            </button>
          </div>
        );
   
   

   需要清除的
   例如订阅外部数据源

        import React, { useState, useEffect } from 'react';
   
        function FriendStatus(props) {
          const [isOnline, setIsOnline] = useState(null);
   
          /* 
            useEffect(() => {
              //1. 订阅事件源的代码
   
              return 2. 卸载事件源的代码
            }) 
           */
   
          useEffect(() => {
            function handleStatusChange(status) {
              setIsOnline(status.isOnline);
            }
   
            ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
            // Specify how to clean up after this effect:
            return function cleanup() {
              ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
            };
          });
   
          if (isOnline === null) {
            return 'Loading...';
          }
          return isOnline ? 'Online' : 'Offline';
        }