React 学习笔记 Part IV

React

b站课程链接跳转

ps： written by Winter-prince

学习前端React做的笔记，供以后复习使用。关键代码基本上都有截图和文字说明，有些部分可能由于内容比较简单没有记录，点击上方课程链接即可跳转前往课程查看详情，关于React的笔记一共有5篇博客，如果需要查看完整内容的请前往专栏查看

我的github：Winter-prince

P61-80

P61对props进行限制

npm install -g yarn # 安装yarn
yarn add prop-types # 添加类型限制的库

P62 删除一个TODO

在父类App组件中定义删除方法

//deleteTodo用于删除一个todo对象
deleteTodo = (id) => {
  //获取原来的todos
  const { todos } = this.state;
  //删除指定id的todo对象
  const newTodos = todos.filter((todo0bj) => {
    return todo0bj.id !== id;
  });
  //更新状态.
  this.setState({ todos: newTodos });
};

delete是关键字,不能随便使用

//删除一个todo的回调
handleDelete = (id) => {
  if (window.confirm("确定删除吗? ")) {
    this.props.deleteTodo(id);
  }
};

P63 实现底部功能

reduce条件统计

defaultChecked只在第一次渲染浏览器的时候起作用，以后就没作用了。

filter方法

一、 todoList案例相关知识点
1.拆分组件、实现静态组件，注意: className、sty1e的写法
2.动态初始化列表，如何确定将数据放在哪个组件的state中?

某个组件使用:放在自身的state中
某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升)

3.关于父子之间通信:

  1. [父组件]给[子组件]传递数据:通过props传递
  2. [子组件]给[父组件]传递数据:通过props传递， 要求父提前给子传递一个函数

4.注意defaultChecked和checked的区别， 类似的还有: defaultValue 和value
5.状态在哪里，操作状态的方法就在哪里

P65 脚手架配置代理方式1

react ajax

axios

yarn add axios

使用Node.js作为服务器

解决跨域，要注意重启VScode

P66 配置代理方式2

服务端文件

可以查看文档

P67 github搜索案例

解构赋值连续写法

连续解构赋值+重命名

P68 axios 发送请求

发送请求

P69 展示数据

P70 完成案例

P71 兄弟组件之间的通信

消息订阅-发布机制

pubsubjs

yarn add pubsub-js

import PubSub from 'pubsub-js'

订阅：

  componentDidMount() {
    this.token = PubSub.subscribe(" atguigu", (_, state0bj) => {
      this.setState(state0bj);
    });
  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  }

发布：

  search = () => {
    //获取用户的输入(连续解构赋值+重命名)
    const {
      keyWordElement: { value: keyWord },
    } = this;
    //发送请求前通知IList更新状态
    PubSub.publish(" atguigu", { isFirst: false, isLoading: true });
    //发送网络请求
    axios.get(`/api1/search/users?q=${keyWord}^`).then(
      (response) => {
        //请求成功后通知lList更新状态
        PubSub.publish(" atguigu", {
          isLoading: false,
          users: response.data.items,
        });
      },
      (error) => {
        //请求失败后通知IApp更新状态
        PubSub.publish(" atguigu", { isLoading: false, err: error.message });
      }
    );
  };

P72 fetch发送请求

xhr

jquery，

axios 是基于promise的

fetch 内置方法

//使用async,await：
search = async () => {
    //获取用户的输入(连续解构赋值+重命名)
    const {
      keyWordElement: { value: keyWord },
    } = this;
    //发送请求前通知List更新状态
    PubSub.publish("atguigu", { isFirst: false, isLoading: true });
    //发送网络请求---使用fetch发送(优化)
    try {
      const response = await fetch(`/api1/search/users2?q=${keyWord}`);
      const data = await response.json();
      console.log(data);
      PubSub.publish("atguigu", { isLoading: false, users: data.items });
    } catch (error) {
      console.log("请求出错", error);
      PubSub.publish("atguigu", { isLoading: false, err: error.message });
    }
  };

P73 github搜索案例总结

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发送请求( 关注分离的设计思想)

try {
 const response= await fetch( `/api1/search/users2?q=${keyWord}` )
 const data = await response.json( )
 console.log(data);
} catch (error) {
	console.log('请求出错' ,error);
}

P74 对SPA应用的理解

单页面，多组件

导航区、展示区、标题区

P75 路由理解

P76 前端路由原理

路由基于BOM的history，栈结构

锚点跳转，兼容性好

let history = History.createHashHistory() //方法二，hash值(锚点)

P77 react-router-dom的理解

印记中文

{/*在React中靠路由链接实现切换组件--编写路由链接*/}
<Link className="list-group-item" to="/about">About</Link> 
<Link className="list-group-item" to="/home">Home</Link>

P78 路由组件与一般组件

路由的基本使用
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签 <Link to="/xxxxx">Demo</Link>

3.展示区写Route标签进行路径的匹配
<Route path= ' /xxxx' component= {Demo}/>

4.<App>的最外侧包裹了一一个<BrowserRouter> 或<HashRouter>

pages文件夹主要存放路由组件

路由组件收到的props与一般组件不一样

不同之处：

1.写法不同:

一般组件: <Demo/>

路由组件: <Route path="/demo" component={Demo}/>

2.存放位置不同:

一般组件: components

路由组件: pages

3.接收到的props不同:

一般组件:写组件标签时传递了什么，就能收到什么

路由组件:接收到三个固定的属性

history:

go: f go(n)

goBack: f goBack()

goForward: f goForward()

push: f push(path, state)

replace: f replace(path, state)

location:

pathname: “/about”

search:

state: undefined

match :

params: {}

path: “/about”

url: “/about”

P79 NavLink的使用

css样式

activeClassName

P80 封装NavLink组件

标签体内容是一个特殊的标签属性