新手在React中遇到的问题

1、construtor里可以有什么？

constructor(props) {
  super(props);
  this.state = {searchStr: ''};
  this.handleChange = this.handleChange.bind(this);
}

但是在应用hook时，不能把hook中的useState写入construtor

3、当有两个state，取得是哪个state?

image.png

4、state的更新可能是异步的

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

5、function组件 无状态函数式组件，顾名思义，无状态，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。

其实无状态函数式组件也是官方比较推荐的一种方式，尽量让底层的组件变成无状态函数式组件，也即组件尽量只用来显示数据，把数据操作的逻辑都放在顶层，然后从顶层把数据传到底层

6、Hook 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

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

function ExampleWithManyStates() {
  // 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);

7、如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook

在多个 Hook 之间传递信息：

8、如果你在接触 Hook 前已经对 context API 比较熟悉，那应该可以理解，useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>。

useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。

9、可以运用useEffect来产生一系列的效应，当其值改变时，相关的事件等也发生相应的反应，
可以这样设置，监控items的变化

 const [items, setItems] = useState({count: 10, offset: 0});
  useEffect(() => {
    getItems(items);
  }, [items]);

10、function组件中没有this指向，在class组件中就必须有this指向

11、只在最顶层使用 Hook
不要在循环，条件或嵌套函数中调用 Hook
例如：出现的错误在 循环中使用useState设置

12、在a标签中onClick自动执行的问题：
如：在利用antd ui框架的Table时

// 根据获得的id值，获取单条数据
  function onDetailList(value){
    console.log(value.uid);
    try {
      console.log("click");
      dispatch({
        type: 'pending/getOnePending',
        payload: {
          uid: value.uid,
          id: 3,
        }
      })
    }catch (e) {
      console.log(e);
    }
  };
/* 表格start */
  const columns = [
    {
      title: '序号',
      dataIndex: 'sortNum',
      key: 'sortNum'
    },
    {
      title: '账户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
    },
    {
      title: '认证时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: '类型',
      key: 'class',
      dataIndex: 'class',
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: ( text,record ) => {
        // console.log(record);
        return (<a href=" javascript:void(0);" onClick={() => onDetailList(record)}>详情</a>)
      }
    }
  ];

如果在onClick中直接写成如下，会在渲染页面时自动执行函数

onClick= { onDetails(record) }

若不想直接执行，可以直接onClick= {onDetails}或者采用上面onClick={() => onDetailList(record)}这种方式

本文如有错误，麻烦大家及时指出，谢谢啦！！！！