Django+React全栈开发：文章详情

验证问题

修改ArticleDetail组件，从后端拿到文章正文。现在如果直接启动应用，会发现获取文章列表时后端返回了403响应，因为在上一节中设置了身份验证，每次请求必须携带正确的JWT，但是事实上对于文章列表和详情的GET请求完全可以忽略验证，毕竟这是一个博客应用，现在先处理这个问题。

这里有一个简陋的解决办法，改写上一章编写的jwt_auth/authentication.py：

class JWTAuthentication(BaseAuthentication):

    def authenticate(self, request):
        header = request.META.get('HTTP_AUTHORIZATION')
        if header is None:
            return None
        ......

如果请求头不包含token则直接返回None，接下来由定义在视图类中的permissions类处理请求，我们之前设置的是IsAdminOrReadonly，未登录用户将拥有只读权限。这个办法有些粗糙，读者可以尝试改进。

Hooks

前端获取文章详情和文章列表组件中请求文章列表的方式差不多。但是文章列表组件是一个类组件，API请求是在类组件的componentDidMount这个生命周期里完成的。ArticleDetail是一个函数组件，前面提到过，函数组件是无状态的，没有生命周期， 那么是否要把函数组件改成类组件呢？

React16为函数式组件提供了一个名为Hook的新特性，官方介绍是这样的：

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Hook以函数的形式让函数组件获得类组件的state和生命周期功能。这次要用到两个Hook，分别是useState和useEffect，下面先看看useState：

import { useParams } from 'react-router-dom';
import { useState } from 'react';

const ArticleDetail = () => {
  const { articleId } = useParams();
  const [body, setBody] = useState('');

  ......
}

增加了两行代码，useState的参数用来设置state的默认值，返回值是一个列表，第一个元素是创建的state，第二个元素是一个函数，可以用来修改state。目前这个state还没有被用上，现在来写一个简单的交互功能，添加一个按钮，点击一下将页面正文内容变成hello world：

const ArticleDetail = () => {
  const { articleId } = useParams();
  const [body, setBody] = useState('');

  return (
    <main>
      <div>{body}</div>
      <button onClick={() => setBody('Hello world')}>hello</button>
    </main>
  )
}

这里用到了React的合成事件onClick，当按钮被点击时，就会触发回调函数，回调函数使用了Hook返回的setBody函数，将body的值更改为「Hello world」。可以回顾一下类组件，上面的代码其实等价于下面这个类组件：

class ArticleDetail extends react.Component {
  constructor(props) {
    super(props);
    this.state = {
      body: '',
    }
  }

  render() {
    return (
      <main>
        <div>
          {this.state.body}
        </div>
        <button onClick={() => this.setState({ body: 'Hello world'})}>hello</button>
      </main>
    )

  }
}

相比之下，是不是感觉函数式的写法更简洁呢？

那么，怎么做到和ArticleList组件componentDidMount生命周期相同的功能呢？这就需要用到另一个Hook：useEffect。

import { useState, useEffect } from 'react';

const ArticleDetail = () => {
  const { articleId } = useParams();
  const [body, setBody] = useState('');

  useEffect(() => {
    fetch(`/api/articles/${articleId}`)
      .then(response => response.json())
      .then(result => setBody(result.body))
      .catch(console.error);
  }, [articleId]);

  return (
    <main>
      <div className="m-2 text-center">{body}</div>
    </main>
  )
}

稍微给正文加点样式方便区分，注意useEffect函数的两个参数，第一个参数是一个回调函数，通过GET请求获取后端的文章详情，这里用到了从路由参数获得的articleId来拼接字符串得到所需文章的后端地址，序列化响应后通过setBody设置body的值；第二个参数是一个列表，useEffect会监视列表中的值，当值发生变化时将会重新执行回调函数更新组件，如果这个列表设置为空将会只执行一次就结束。

注意事项

使用Hook有一些注意事项：

• Hooks只能出现在函数式组件或自定义Hook中
• Hooks必须在最顶层（不能在条件语句、循环体或者嵌套函数内部）

如果有时候你想在某个条件下才执行useEffect的内容，那么不要把整个Hook放到条件语句内，而是在useEffect的回调函数内部做条件判断。

开发者可以自定义Hook来复用代码，例如多个组件都需要一个获取用户信息的逻辑，那么就可以封装一个自定义Hook：

function useUser(friendID) {
  const [user, setUser] = useState(null);
  useEffect(......)

  return user;
}

一般约定这类自定义Hook函数以use开发，回顾之前的代码，可以发现，其实我们早就已经用到了一个Hook函数：useParams。

练习

读者可以尝试在页面上呈现文章标题创建日期等其他信息。