关注分离思想——Fetch的使用

芝麻凛 2021年12月23日 93次浏览

一:

  1.拆分组件、实现静态组件,注意:className、style的写法
  2.动态初始化列表,如何确定将数据放在那个组件的state中?
    —— 某个组件使用:放在自身的state中
    —— 某些组件使用:放在他们共同的父组件state中(官方称为:状态提升)
  3.关于父子之间的通信:
    1.【父组件】给【子组件】传递数据:通过props传递
    2.【子组件】给【父组件】传递数据:通过props传递,要求父组件提前给子组件传递一个函数
  4.注意defaultChecked 和 checked 的区别,类似的还有:defaultValue 和 value
  5.状态在哪里,操作状态的方法就在哪里。

二:

  1.设计状态时要考虑全面,例如带有网络请求的组件,要考虑请求失败怎么办。
  2.ES6知识点:解构赋值+重命名
      let obj = {a:{b:1}}
      const {a} = obj; //传统解构赋值
      const {a:{b}} = obj; //连续解构赋值
      const {a:{b:value}} = obj; //连续解构赋值+重命名
  3.消息订阅与发布机制
      1.先订阅,再发布(理解为隔空对话)
      2.使用与任何组件间的通信
      3.要在组件的componentWillUnmount中取消订阅
  4.fetch发送请求(关注分离的设计思想)
      ```javascript
         search = async () => {
          //获取用户的输入(连续解构赋值+重命名)
          const { keyWordElement: { value: keyWord } } = this
          // 发送请求前通知List更新状态
          // this.props.updateAppState({ isFirst: false, isLoading: true })
          PubSub.publish('yminami', { isFirst: false, isLoading: true })
          // 发送网络请求(使用axios)
          // axios.get(`/api1/search/users2?q=${keyWord}`).then(
          //   response => {
          //     // 请求成功后通知App更新状态
          //     PubSub.publish('yminami', { isLoading: false, users: response.data.items })
          //   },
          //   error => {
          //     //请求失败后通知App更新状态
          //     PubSub.publish('yminami', { isLoading: false, err: error.message })

          //   }
          // )
          //   fetch(`/api1/search/users2?q=${keyWord}`).then(
          //     response => {
          //       console.log('联系服务器成功了');
          //       return response.json()
          //     },
          //     // error => {
          //     //   console.log('联系服务器失败了', error);
          //     //   return new Promise(() => { })
          //     // }
          //   ).then(
          //     response => { console.log('获取数据成功', response); },
          //     // error => { console.log('获取数据失败了', error); }
          //   ).catch(
          //     (error) => { console.log('请求出错', error); }
          //   )

          try {
            const response = await fetch(`/api1/search/users2?q=${keyWord}`)
            const data = await response.json()
            PubSub.publish('yminami', { isLoading: false, users: data.items })
            console.log(data);
          } catch (error) {
            PubSub.publish('yminami', { isLoading: false, err: error.message })
            console.log('请求错误', error);
          }
        }