react github搜索案例 知识点总结

最终效果

1.ES6知识点：解构赋值+重命名

let obj ={a,{b:2}}
const {a} = obj					// 传统解构赋值
const {a:{b}} = obj				// 连续解构赋值
const {a：{b:value}} = obj		// 连续解构赋值+重命名

2.消息订阅与发布机制

1. 先订阅，再发布
2. 适用于任何组件内的通信
3. 在 componentWillUnmount() 中取消订阅

// 订阅
this.token = Pubsub.subscribe('updateListState', (_, data) => {
      this.setState(data)
    })
// 更新信息
 Pubsub.publish('updateListState', { isLoading: false, users: data.items })
 // 取消订阅
 Pubsub.unsubscribe(this.token)

3.fetch发送请求(关注分离设计思想)

要处理请求失败的情况

try {
      const reponse = await fetch(`/api1/search/users2?q=${keyword}`)
      const data = await reponse.json()
      Pubsub.publish('updateListState', { isLoading: false, users: data.items })
    } catch (error) {
      console.log('请求出错', error)
      Pubsub.publish('updateListState', { isLoading: false, err: '请求出错:' + error.message })
    }

github链接

github搜索案例