https://codthing.github.io/react/ Recent content in React on codthing Hugo -- gohugo.io ko ©{year}, codthing Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/redux/react-redux/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/redux/react-redux/ 这两种技术的关键原则是什么? React 是提供数据的视图库，能以高效、可预测的方式渲染视图。 Redux 是状态管理框架，可用于简化 APP 应用状态的管理。 在 React Redux app 应用 https://codthing.github.io/react/react/react-base/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/react/react-base/ 简介：React 是由 Facebook 创建和维护的开源视图库。 它是渲染现代 Web 应用程序用户界面（UI）的好工具。 一、JSX（JS 语法扩展） React 使用名为 JSX 的 JavaScript 语法 https://codthing.github.io/react/react/react-bp/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/react/react-bp/ React 是一个声明式、高效且灵活的 JavaScript 库 一、特性 虚拟 DOM：保存在内存中并通过 ReactDOM 等库与“真实”DOM 同步的 UI 表示。使用这种方法，只有实际更改的组件才 https://codthing.github.io/react/redux/redux-base/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/redux/redux-base/ Redux 是一个状态管理框架， 但我觉得它同时也是一门语言，因为它有自己的一套行事规则。 Redux 代码库本身很小，核心概念也很简洁明了，但是它的 “语言” 却不寻 https://codthing.github.io/react/hooks/hooks-bp/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/hooks/hooks-bp/ Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。 Hook 使 https://codthing.github.io/react/redux/hooks-redux/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/redux/hooks-redux/ 现在，有了 Hooks, 甚至可以自己编写 Reducer，通过 Proxy 对状态进行操作。 但是，为了更融入市场而且现在有了 Redux Tookit（可以减少很多代码量），所以 https://codthing.github.io/react/zustand/zustand-base/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/zustand/zustand-base/ zustand 基于 hooks 的 api，小型、快速且可扩展的状态管理解决方案。 一、安装 yarn add zustand 二、最简使用方法 Step1. 创建一个 Store store 是一个钩子！ 可以在里面放任何东西：原始数 https://codthing.github.io/react/recoil/recoil-bp/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/recoil/recoil-bp/ Recoil 是 React 官方 meta (facebook) 官方实验室的状态管理库，贴合 React hooks，自由度很高，所以要在项目中做一些规范，以便提供最佳的实践。 官方文档有对核心概念的解释 https://codthing.github.io/react/next/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/next/ https://codthing.github.io/react/remix/remix-base/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/remix/remix-base/ 一、创建 Remix 应用 npx create-remix@latest yarn dev 二、创建文件路由 app/root.tsx Layout 组件中 <li> <Link to="/posts">Posts</Link> </li> 创建 app/routes/posts/index.tsx export default function Posts() { return ( <div> <h1>Posts</h1> </div> ) } 三、加载数据 Remix 的路由文件相当于后端的模板视图，也是控制 https://codthing.github.io/react/remix/remix-adv/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/remix/remix-adv/ 一、创建 Remix 项目 npx create-remix@latest yarn yarn dev 二、目录结构 app/ - 所有Remix应用程序代码的位置 app/entry.client.tsx- JavaScript 的第一部分，它将在应用程序在浏览器中加载时运行。我们使用此文件来 https://codthing.github.io/react/storybook/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/storybook/ https://codthing.github.io/react/tailwindcss/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/tailwindcss/ https://codthing.github.io/react/wechat-mini/ Tue, 28 Jan 2020 00:34:39 +0900 https://codthing.github.io/react/wechat-mini/