React学习计划-React16--React基础（五）todoList案例、配置代理、消息订阅与发布

一、todoList案例相关知识点

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

案例：

1. 文件目录结构：
   

2. App.js：
   

3. app.module.css:
   

4. Hearder

   • index.jsx
     
   • index.css

     	.search {
     	  width: calc(100% - 20px);
     	  padding: 10px;
     	}
     

5. List

   • index.jsx
     
   • idnex.css

   ul {
     list-style:  none;
     margin: 0;
     padding: 0;
   }
   

6. Item

   • index.jsx
     

   • index.module.css

   .li-content{
     display: flex;
     justify-content: space-between;
     padding: 2px 5px;
   }
   .del {
     border: none;
     background: none;
     font-size: 18px;
     font-weight: bold;
     color: red;
   }
   

7. Footer:

   • index.jsx
     

   • index.module.css

   .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 50px;
     padding: 10px 20px;
     border-top: 1px solid #ccc;
   }
   .count{
     margin-left: 20px;
   }
   button {
     width: 150px;
     height: 40px;
     background-color: rgb(255, 0, 72);
     border-radius: 20px;
     color: #fff;
     cursor: pointer;
   }
   

8.运行效果

二、配置代理

1. 代理到服务器的5000端口,前端端口是3000,请求时候http://localhost:3000/students 所有3000端口下没有的资源都会转发到http://localhost:5000,如果有则不转发
   

2. 配置多个代理
   

三、消息订阅与发布(pubSub)

1. 安装**yarn add pubsub-js**
2. 接收组件List/index.jsx

  // 一挂载好就订阅消息
  import PubSub from 'pubsub-js'
  componentDidMount(){
    this.pub = PubSub.subscribe('defClick', (_, data) => {
      this.setState(data)
    })
  }

  // 取消订阅
  componentWillUnmount(){
    PubSub.unsubscribe(this.pub)
  }

3. 发布信息Hearder/index.jsx

import PubSub from 'pubsub-js'
PubSub.publish('defClick', {val})