<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Frontend on Yosgi Blog</title><link>https://siqi-liu.com/en/categories/frontend/</link><description>Recent content in Frontend on Yosgi Blog</description><generator>Hugo</generator><language>en</language><lastBuildDate>Fri, 12 Jun 2026 04:28:41 +0000</lastBuildDate><atom:link href="https://siqi-liu.com/en/categories/frontend/index.xml" rel="self" type="application/rss+xml"/><item><title>Understanding React Hooks</title><link>https://siqi-liu.com/en/post/understanding-react-hooks/</link><pubDate>Thu, 25 Feb 2021 00:00:00 +0000</pubDate><guid>https://siqi-liu.com/en/post/understanding-react-hooks/</guid><description>Understanding React Hooks Release Date: February 25, 2021 Understanding React Hooks Those who have used the old version of react should know that react’s class component has state to manage the internal state, as shown in the following example code class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( &lt;div&gt; &lt;h1&gt;Hello, world!&lt;/h1&gt; &lt;h2&gt;It is {this.state.date.toLocaleTimeString()}.&lt;/h2&gt; &lt;/div&gt; ); } }Function components do not have their own state, as shown in the following example code function Clock() { return ( &lt;div&gt; &lt;h1&gt;Hello, world!&lt;/h1&gt; &lt;h2&gt;It is {new Date().toLocaleTimeString()}.&lt;/h2&gt; &lt;/div&gt; ) }If I want to use a function component and want to have manual control over the date, I have to modify the component using props as follows, which transfers control to the parent component:</description></item><item><title>CSS pseudo-class selector nth-child</title><link>https://siqi-liu.com/en/post/css-pseudo-class-selector-nth-child/</link><pubDate>Thu, 07 Mar 2019 17:32:19 +0000</pubDate><guid>https://siqi-liu.com/en/post/css-pseudo-class-selector-nth-child/</guid><description>About nth-child and HTML specifications</description></item><item><title>Vue + express + mongodb build a backend login system</title><link>https://siqi-liu.com/en/post/vue-express-mongodb-build-a-backend-login-system/</link><pubDate>Thu, 13 Dec 2018 18:15:10 +0000</pubDate><guid>https://siqi-liu.com/en/post/vue-express-mongodb-build-a-backend-login-system/</guid><description>Keywords nodejs vue express mongodb</description></item><item><title>Summary of Vue's easy-to-error and easy-to-confuse knowledge points</title><link>https://siqi-liu.com/en/post/summary-of-vue-s-easy-to-error-and-easy-to-confuse-knowledge-points/</link><pubDate>Mon, 10 Sep 2018 18:30:10 +0000</pubDate><guid>https://siqi-liu.com/en/post/summary-of-vue-s-easy-to-error-and-easy-to-confuse-knowledge-points/</guid><description>Knowledge Points Summary</description></item><item><title>HTTP Protocol Summary</title><link>https://siqi-liu.com/en/post/http-protocol-summary/</link><pubDate>Mon, 23 Jul 2018 23:29:19 +0000</pubDate><guid>https://siqi-liu.com/en/post/http-protocol-summary/</guid><description>HTTP simple organization</description></item><item><title>A Brief Introduction to Web Security</title><link>https://siqi-liu.com/en/post/a-brief-introduction-to-web-security/</link><pubDate>Thu, 05 Jul 2018 10:05:36 +0000</pubDate><guid>https://siqi-liu.com/en/post/a-brief-introduction-to-web-security/</guid><description>Web security related content</description></item></channel></rss>