build React.

themes/simple/components/BlogListScroll.js

@@ -1,6 +1,6 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { BlogItem } from './BlogItem'
 
@@ -8,7 +8,7 @@ export const BlogListScroll = props => {
   const { posts } = props
   const { locale } = useGlobal()
 
-  const [page, updatePage] = React.useState(1)
+  const [page, updatePage] = useState(1)
 
   let hasMore = false
   const postsToShow = posts
@@ -24,10 +24,10 @@ export const BlogListScroll = props => {
     updatePage(page + 1)
   }
 
-  const targetRef = React.useRef(null)
+  const targetRef = useRef(null)
 
   // 监听滚动自动分页加载
-  const scrollTrigger = React.useCallback(throttle(() => {
+  const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY + window.outerHeight
     const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
     if (scrollS > clientHeight + 100) {
@@ -35,7 +35,7 @@ export const BlogListScroll = props => {
     }
   }, 500))
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
 
     return () => {

themes/simple/components/ExampleRecentComments.js

@@ -1,7 +1,7 @@
-import React from 'react'
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import { RecentComments } from '@waline/client'
+import { useEffect, useState } from 'react'
 
 /**
  * @see https://waline.js.org/guide/get-started.html
@@ -9,9 +9,9 @@ import { RecentComments } from '@waline/client'
  * @returns
  */
 const ExampleRecentComments = (props) => {
-  const [comments, updateComments] = React.useState([])
-  const [onLoading, changeLoading] = React.useState(true)
-  React.useEffect(() => {
+  const [comments, updateComments] = useState([])
+  const [onLoading, changeLoading] = useState(true)
+  useEffect(() => {
     RecentComments({
       serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
       count: 5

themes/simple/components/JumpToTopButton.js

@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
+import { useEffect, useState } from 'react'
 
 /**
  * 跳转到网页顶部
@@ -11,7 +11,7 @@ import React from 'react'
  */
 const JumpToTopButton = () => {
   const { locale } = useGlobal()
-  const [show, switchShow] = React.useState(false)
+  const [show, switchShow] = useState(false)
   const scrollListener = () => {
     const scrollY = window.pageYOffset
     const shouldShow = scrollY > 200
@@ -20,7 +20,7 @@ const JumpToTopButton = () => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])