标签 react.js 下的文章

2024-08-11

在现有的React项目中应用TypeScript，你需要进行以下步骤：

安装TypeScript和相关类型定义：




npm install --save typescript @types/node @types/react @types/react-dom @types/prop-types

初始化TypeScript配置文件：




npx tsc --init

这将创建一个tsconfig.json文件，你可能需要根据项目需要编辑这个文件。

将项目中的.js和.jsx文件扩展名改为.ts和.tsx。
如果你使用的是Create React App创建的项目，你可以通过以下命令来创建一个TypeScript版本的项目：




npx create-react-app my-app-ts --template typescript

确保你的编辑器或IDE支持TypeScript并正确配置它。
重新启动你的开发服务器，它应该能够处理TypeScript文件并进行相应的类型检查。

以下是一个简单的TypeScript + React函数组件示例：




import React from 'react';
 
interface GreetingProps {
  name: string;
}
 
const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};
 
export default Greeting;

在这个例子中，我们定义了一个Greeting组件，它接受一个名为name的属性，并在渲染时显示一个欢迎消息。这个组件使用TypeScript的接口来定义其属性，并且使用了React的FC（FunctionComponent）类型来简化函数组件的定义。

- 阅读更多 -

React 中 CSS in JS 的最佳实践，详解系列文章

System

2024-08-11

所有,css

在React中，CSS in JS是一种实现方式，它允许我们在组件内部直接编写CSS。这种方法有一些优点，例如可以避免CSS类名冲突，但也有一些缺点，例如增加了组件的体积和复杂性。

以下是一些CSS in JS的最佳实践：

使用styled-components库

styled-components是一个库，它允许我们使用JavaScript来编写CSS。这是一个很好的实践，因为它可以保持组件的功能性和样式的封装性。




import styled from 'styled-components';
 
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
 
  &:hover {
    background-color: green;
  }
`;
 
export default function App() {
  return <Button>Click me</Button>;
}

避免使用内联样式

尽管内联样式可以直接在JSX中编写，但是它们通常不推荐用于性能原因。相反，应该使用常规的CSS文件或styled-components。

避免在样式中使用props

尽管可以在样式中使用组件的props来动态创建样式，但这可能会导致性能问题，因为每次prop更改时都会重新计算样式。

使用CSS模块化

CSS模块化是一种把CSS样式封装到一小块功能性的代码里的实践，这样可以保持代码的可维护性和可复用性。




import styles from './App.module.css';
 
export default function App() {
  return <div className={styles.container}>Hello World</div>;
}

避免使用!important

!important可以覆盖CSS中的所有样式，但是它应该尽可能避免使用，因为它破坏了CSS的特性和优先级规则。

使用CSS-in-JS库

除了styled-components，还有其他的CSS-in-JS库，例如emotion和radium等，每个库都有自己的优点和适用场景。

使用主题化

主题化是一种让用户可以轻松更换应用程序风格的实践，它可以通过CSS-in-JS库来实现。




const theme = {
  color: 'blue',
};
 
const Button = styled.button`
  color: ${props => props.theme.color};
`;
 
// 使用主题
<Button theme={theme}>Hello World</Button>

以上就是React中CSS in JS的一些最佳实践，每种实践都有其适用的场景，开发者可以根据自己的需求和项目的实际情况来选择合适的实践。

- 阅读更多 -

【vueUse库Reactivity模块各函数简介及使用方法--中篇】

System

2024-08-11

所有,vue.js




<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { useCounter } from './myCounter'
 
const { count, increment } = useCounter(1)
</script>

在这个例子中，我们定义了一个简单的计数器功能，并在Vue组件中使用了ref来创建响应式的数据，以及自定义的useCounter函数。这个函数返回了一个包含count和increment的对象，count用于显示计数，increment是一个函数用于增加计数。在模板中，我们通过绑定点击事件来触发increment函数，并显示count的值。

- 阅读更多 -

网站升级提示：我用react+go重构了网站并记录了部署项目简要步骤

System

2024-08-11

所有,golang

在不改变原有功能的基础上，重构一个网站并记录部署步骤是一个合理的需求。以下是一个简要的解决方案和示例代码：




# 克隆旧的前端代码仓库
git clone https://github.com/your-old-frontend-repo.git
 
# 进入前端代码目录
cd your-old-frontend-repo
 
# 安装依赖
npm install
 
# 构建前端代码
npm run build
 
# 克隆旧的后端代码仓库
git clone https://github.com/your-old-backend-repo.git
 
# 进入后端代码目录
cd your-old-backend-repo
 
# 设置Go环境（如果需要）
export GO111MODULE=on
export GOPROXY=https://goproxy.io,direct
 
# 构建后端代码
go build
 
# 部署前端资源
cp -r your-old-frontend-repo/build/* /path/to/your/server/public/
 
# 部署后端二进制文件
cp your-old-backend-repo/myapp /path/to/your/server/bin/
 
# 在服务器上配置systemd服务
echo '[Unit]
Description=My Go Web App
 
[Service]
ExecStart=/path/to/your/server/bin/myapp
 
[Install]
WantedBy=multi-user.target' > /etc/systemd/system/myapp.service
 
# 重新加载systemd配置并启动服务
systemctl daemon-reload
systemctl enable myapp.service
systemctl start myapp.service

以上步骤假设你已经有了旧的前端和后端代码仓库，并且新的后端是用Go语言编写的。在实际部署时，你需要根据你的服务器配置和环境来调整文件路径和服务配置。

System

2024-08-11

所有,typescript




import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
 
// 假设有一个action创建函数和一个redux store
// action创建函数
export function incrementCounter() {
  return {
    type: 'INCREMENT'
  };
}
 
// 使用hooks获取store的状态和dispatch函数
export default function CounterComponent() {
  // 使用useSelector钩子获取store中的状态
  const counter = useSelector((state: any) => state.counter);
 
  // 使用useDispatch钩子获取dispatch函数
  const dispatch = useDispatch();
 
  // 使用useStore钩子获取整个store对象
  // const store = useStore();
 
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch(incrementCounter())}>Increment</button>
    </div>
  );
}

这个代码示例展示了如何在React-redux项目中使用hooks（useSelector, useDispatch, 和useStore）来获取store的状态，dispatch函数，以及整个store对象。这是一种更现代，更简洁的React编写方式，它提高了代码的可读性和可维护性。

- 阅读更多 -

从无到有新建一个electron+react+typescript桌面客户端

System

2024-08-11

所有,typescript




# 安装Electron CLI工具
npm install -g electron
 
# 创建一个新的React项目
npx create-react-app my-electron-app --template typescript
 
# 进入项目目录
cd my-electron-app
 
# 集成Electron到React项目
npm install --save-dev electron
 
# 添加一个脚本来启动Electron
npm install --save-dev electron-builder

以上是创建一个新的Electron + React + TypeScript桌面应用程序的基本步骤。这只是开始，你还需要添加Electron的主进程文件，如main.js或main.ts，并配置你的package.json来指定Electron的启动文件。

System

2024-08-11

所有,typescript

在Vue项目中，如果你想要自动引入Vue的响应式API（如ref、reactive等），可以使用Vite的插件来实现。以下是一个简单的例子，展示了如何创建一个Vite插件来自动引入Vue的响应式系统。

首先，你需要安装Vue和Vite：




npm install vue
npm install -D vite

然后，创建一个Vite插件：




// vite-plugin-auto-vue-api.js
import { createApp, ref, reactive } from 'vue';
 
export default function () {
  return {
    apply: 'build',
    resolveId(source) {
      if (source === 'vue') {
        return source;
      }
    },
    load(id) {
      if (id === 'vue') {
        return `
          import { createApp, ref, reactive } from 'vue';
          export { createApp, ref, reactive };
        `;
      }
    },
  };
}

接着，在Vite配置文件中引入并使用这个插件：




// vite.config.js
import vue from '@vitejs/plugin-vue';
import autoVueApiPlugin from './vite-plugin-auto-vue-api';
 
export default {
  plugins: [
    vue(),
    autoVueApiPlugin()
  ]
};

现在，在你的Vue组件中，你可以直接使用ref和reactive，无需显式引入它们：




<script setup>
import { ref, reactive } from 'vue';
 
const count = ref(0);
const state = reactive({ count });
</script>

这个插件会在构建时自动引入Vue的响应式API，并使其在每个文件中可用，从而简化了你的代码并提高了开发效率。

System

2024-08-11

所有,html

在React中，你可以使用dangerouslySetInnerHTML属性来渲染HTML结构。这个属性名字很长，所以通常我们会把它和一个简单的别名一起使用，比如html。

这里是一个简单的例子：




function createMarkup(html) {
  return { __html: html };
}
 
function MyComponent({ htmlContent }) {
  return (
    <div dangerouslySetInnerHTML={createMarkup(htmlContent)} />
  );
}
 
// 使用组件
const htmlContent = '<strong>这是粗体文本</strong>';
ReactDOM.render(<MyComponent htmlContent={htmlContent} />, document.getElementById('root'));

在这个例子中，MyComponent接收一个htmlContent属性，它是将要被渲染的HTML字符串。createMarkup函数接收HTML字符串并返回一个对象，这个对象有一个特殊的__html属性，它包含了原始的HTML。

dangerouslySetInnerHTML属性接收这个对象，并把它的HTML内容设置到组件的innerHTML中。

请注意，使用dangerouslySetInnerHTML可能会带来跨站脚本攻击(XSS)的风险，因此只在你能够确信内容是安全的情况下使用它。如果你需要渲染用户提供的内容，请确保对内容进行清洗处理，例如使用库如DOMPurify。

- 阅读更多 -

React-Hoc高阶组件与css-in-js技术

System

2024-08-11

所有,css




import React from 'react';
import styled from 'styled-components';
 
// 创建带样式的按钮组件
const StyledButton = styled.button`
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文本 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 居中文本 */
  text-decoration: none; /* 无文本装饰 */
  display: inline-block; /* 行内块显示 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 手形鼠标光标 */
`;
 
// 高阶组件，用于处理点击事件
const withClickHandler = (WrappedComponent) => {
  return class extends React.Component {
    handleClick = () => {
      console.log('按钮被点击');
      // 这里可以添加点击后的处理逻辑
    }
 
    render() {
      const props = { ...this.props, handleClick: this.handleClick };
      return <WrappedComponent {...props} />;
    }
  };
};
 
// 使用高阶组件和样式化组件
const ButtonWithClickHandler = withClickHandler(StyledButton);
 
export default () => <ButtonWithClickHandler onClick={() => console.log('点击事件触发')}>点我</ButtonWithClickHandler>;

这个例子展示了如何结合使用高阶组件和CSS-in-JS库（例如styled-components）来创建一个带有点击事件处理逻辑的按钮组件。withClickHandler是一个高阶组件，它封装了点击事件的处理逻辑，而StyledButton是一个使用styled-components定义样式的按钮组件。最后，我们导出了一个结合了两者的ButtonWithClickHandler组件，可以直接在应用中使用。

- 阅读更多 -

【前端项目——分页器】手写分页器实现（JS / React）

System

2024-08-11

所有,javascript

以下是一个简单的分页器实现，使用JavaScript和React。




import React, { useState } from 'react';
import PropTypes from 'prop-types';
 
const Pagination = ({ itemsCount, pageSize }) => {
  const [currentPage, setCurrentPage] = useState(1);
 
  const goToPage = (page) => {
    if (page < 1 || page > Math.ceil(itemsCount / pageSize)) return;
    setCurrentPage(page);
  };
 
  const handlePreviousClick = () => goToPage(currentPage - 1);
  const handleNextClick = () => goToPage(currentPage + 1);
 
  const pagesCount = Math.ceil(itemsCount / pageSize);
  const pages = Array.from({ length: pagesCount }, (_, i) => i + 1);
 
  return (
    <div>
      <button disabled={currentPage === 1} onClick={handlePreviousClick}>
        Previous
      </button>
      {pages.map((page) => (
        <button
          key={page}
          onClick={() => goToPage(page)}
          style={{ backgroundColor: currentPage === page ? 'blue' : 'white' }}
        >
          {page}
        </button>
      ))}
      <button disabled={currentPage === pagesCount} onClick={handleNextClick}>
        Next
      </button>
    </div>
  );
};
 
Pagination.propTypes = {
  itemsCount: PropTypes.number.isRequired,
  pageSize: PropTypes.number.isRequired,
};
 
export default Pagination;

在这个例子中，我们创建了一个名为Pagination的React组件，它接受itemsCount（总项目数）和pageSize（每页项目数）作为props。组件状态包含当前currentPage，并提供了goToPage方法来更新这个状态。handlePreviousClick和handleNextClick方法用来处理上一页和下一页的点击事件。最后，我们生成页面按钮并根据当前页设置样式。

- 阅读更多 -