Match-id-0a48877831a79361fdf926f7d7b187c7a9ae408c
This commit is contained in:
*
parent
0917cf56e9
commit
33d6676ae0
|
|
@ -63,386 +63,6 @@ yarn add inulaJS
|
||||||
|
|
||||||
请查阅InulaJS的用户使用指南文档以了解更多关于如何使用和配置框架的详细信息。
|
请查阅InulaJS的用户使用指南文档以了解更多关于如何使用和配置框架的详细信息。
|
||||||
|
|
||||||
## 用户使用指南
|
|
||||||
|
|
||||||
### 创建应用
|
|
||||||
|
|
||||||
#### 渲染入口
|
|
||||||
|
|
||||||
InulaJS提供一个render方法，将InulaJS根组件绑定到DOM节点进行渲染：
|
|
||||||
|
|
||||||
```JavaScript
|
|
||||||
import Inula from 'inulaJS';
|
|
||||||
import App from './components/App';
|
|
||||||
|
|
||||||
Inula.render(<App />, document.querySelector('#root'));
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 根组件
|
|
||||||
|
|
||||||
InulaJS应用通常是一颗嵌套的、可重用的组件树组成。这里我们示例中根组件没有嵌套子组件，仅作为简单应用展示
|
|
||||||
|
|
||||||
```JavaScript
|
|
||||||
import Inula from 'inulaJS';
|
|
||||||
import Box from './Box';
|
|
||||||
const App = () => {
|
|
||||||
return <p>Hello world!</p>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
```
|
|
||||||
|
|
||||||
### jsx语法
|
|
||||||
|
|
||||||
#### 基本语法
|
|
||||||
|
|
||||||
jsx写法上和HTML类似，但是比HTML更加严格，标签必须闭合。组件返回的jsx标签必须包含在一个标签内。jsx中常量"greet"可以直接用双引号包裹赋值给className属性， style属性值则需要{{}}包裹，style属性名采用驼峰风格。
|
|
||||||
|
|
||||||
```JavaScript
|
|
||||||
<div className="greet" style={{ fontSize: '16px'}}>
|
|
||||||
<p>你好</p>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 变量绑定
|
|
||||||
|
|
||||||
在jsx中，给一个属性绑定变量需要用{}包裹。将user的class和name字段绑定到dom节点上，如下所示
|
|
||||||
|
|
||||||
```JavaScript
|
|
||||||
<div className={ user.class } style={{ fontSize: '16px'}}>
|
|
||||||
<p>{ user.name }</p>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 事件绑定
|
|
||||||
|
|
||||||
在jsx中，事件绑定需要在事件名前加'on‘，事件名采用驼峰风格，如onMouseMove。onClick事件绑定如下所示
|
|
||||||
|
|
||||||
```JavaScript
|
|
||||||
<button onClick={(e)=>{console.log('click')}}></button>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 在JSX中使用JavaScript
|
|
||||||
|
|
||||||
在 JSX 中，可以使用大括号 `{}` 来嵌入 JavaScript 表达式和代码。这允许我们在 JSX 中使用变量、函数调用、条件语句等 JavaScript 功能，以便动态地生成和渲染组件。
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const Greeting = () => {
|
|
||||||
const name = '小明';
|
|
||||||
const age = 18;
|
|
||||||
const isLoggedIn = true;
|
|
||||||
|
|
||||||
const getGreeting = (name) => {
|
|
||||||
return `你好, ${name}!`;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>{getGreeting(name)}</h1>
|
|
||||||
{
|
|
||||||
if (isLoggedIn) {
|
|
||||||
return <p>欢迎你, {name}! 你的年龄是 {age} 岁</p>;
|
|
||||||
} else {
|
|
||||||
return <p>请登陆后查看信息</p>;
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
#### map、&&、||在InulaJS中的使用
|
|
||||||
|
|
||||||
`map`、`&&` 和 `||` 是常用的 JavaScript 操作符和方法，它们也可以在 InulaJS组件中使用。下面是它们的使用方式：
|
|
||||||
|
|
||||||
**map**:`map` 是 JavaScript 中数组的原生方法，用于遍历数组并返回一个新的数组。在 InulaJS中，可以使用 `map` 来遍历数组并渲染多个组件或元素。通过 `map`，可以根据数组的每个元素生成相应的组件或元素，并将它们放置在 JSX 中。以下是在 InulaJS中使用 `map` 的简单示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const numbers = [1, 2, 3, 4, 5];
|
|
||||||
|
|
||||||
const NumberList = () => {
|
|
||||||
return (
|
|
||||||
<ul>
|
|
||||||
{numbers.map(number => (
|
|
||||||
<li key={number}>{number}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
**&&**：`&&` 是 JavaScript 中的逻辑与操作符。在 InulaJS中，我们可以使用 `&&` 来进行条件渲染，即根据某个条件决定是否渲染某个组件或元素。以下是在 InulaJS中使用 `&&` 进行条件渲染的示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const ShowExample = ({ isShow }) => {
|
|
||||||
return <div>{isShow && <p>这是一个简单示例</p>}</div>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
在上述示例中，如果 `isShow` 属性的值为 `true`，则渲染 `<p>` 元素，否则不进行渲染。
|
|
||||||
|
|
||||||
**||**:`||` 是 JavaScript 中的逻辑或操作符。在 InulaJS中，我们可以使用 `||` 进行条件渲染或提供默认值。以下是在 InulaJS中使用 `||` 进行条件渲染或提供默认值的示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const Greeting = ({ name }) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>Hello, {name || '小明'}!</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
在上述示例中，如果 `name` 属性存在，则渲染 `name` 的值，否则渲染默认值 `'小明'`。
|
|
||||||
|
|
||||||
### 组件
|
|
||||||
|
|
||||||
InulaJS界面开发都是以组件为基础的。组件可以将界面分为若干独立的，可重用的部分。组件通过嵌套、排列组成一颗组件树，将内部逻辑进行隔离。InulaJS可以支持函数式组件和class组件，这里不再对class组件进行介绍。
|
|
||||||
|
|
||||||
#### props
|
|
||||||
|
|
||||||
InulaJS函数式组件是一种使用函数来定义的组件形式。函数式组件相对于传统的类组件更简洁和直观，它不依赖于类和组件状态，而是通过接收 props 参数并返回 JSX 元素来描述组件的外观和行为。 在`||`逻辑运算符的使用示例中 ，`Greeting`即为一个简单的函数式组件，通过函数传入的参数接收了props中的name属性，并在JSX标签中使用。
|
|
||||||
|
|
||||||
#### hooks
|
|
||||||
|
|
||||||
Hooks允许我们在函数式组件中使用状态（state）和其他 InulaJS特性，如生命周期方法和上下文（context），而无需使用类组件。通过 Hooks，我们可以在函数式组件中编写更具可读性和可维护性的代码，使组件逻辑更加灵活和可复用。
|
|
||||||
|
|
||||||
**useState** ：
|
|
||||||
|
|
||||||
`useState` 是最常用的 Hook，它允许在函数式组件中添加状态管理。通过 `useState`，我们可以声明一个状态变量，并返回一个包含当前状态和更新状态的数组。以下是useState的使用示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const Counter = () => {
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
|
|
||||||
const increment = () => {
|
|
||||||
setCount(count + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>Count: {count}</p>
|
|
||||||
<button onClick={increment}>+1</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
在上面的Counter组件示例中，声明了一个名为 `count` 的状态变量，并通过 `setCount` 函数更新它。每次点击按钮时，调用 `increment` 函数会将 `count` 的值加一。
|
|
||||||
|
|
||||||
**useEffect** ：
|
|
||||||
|
|
||||||
`useEffect` 允许在函数式组件中执行副作用操作，如数据订阅、DOM 操作、网络请求等。它接收一个副作用函数和一个依赖数组，并在组件渲染完成后执行副作用函数。以下是`useEffect` 的使用示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const Counter = () => {
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log('组件已经被渲染');
|
|
||||||
return () => {
|
|
||||||
console.log('组件已经被卸载');
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const increment = () => {
|
|
||||||
setCount(count + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>Count: {count}</p>
|
|
||||||
<button onClick={increment}>+1</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
在上面示例中，我们使用 `useEffect` 声明了一个副作用函数，在组件渲染完成后执行。`console.log` 语句会打印出组件渲染和组件卸载的消息。通过传递一个空数组作为依赖项，确保副作用函数只在组件挂载时执行一次。
|
|
||||||
|
|
||||||
**useContext** ：
|
|
||||||
|
|
||||||
`useContext` 允许在函数式组件中访问 InulaJS上下文。它接收一个上下文对象并返回当前上下文的值。以下是`useContext` 的使用示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const ThemeContext = InulaJS.createContext('亮色主题');
|
|
||||||
|
|
||||||
const ThemeDisplay = () => {
|
|
||||||
const theme = useContext(ThemeContext);
|
|
||||||
|
|
||||||
return <p>当前主题: {theme}</p>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
在上面示例中，创建了一个上下文对象 `ThemeContext`，并在 `ThemeDisplay` 组件中使用了 `useContext`拿到当前上下文的主题值。
|
|
||||||
|
|
||||||
**useReducer** ：
|
|
||||||
|
|
||||||
`useReducer` 允许在函数式组件中使用复杂的状态逻辑。它接收一个状态管理函数和初始状态，并返回当前状态和派发动作的函数。以下是`useReducer` 的使用示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const initialState = { count: 0 };
|
|
||||||
|
|
||||||
const reducer = (state, action) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case '增加':
|
|
||||||
return { count: state.count + 1 };
|
|
||||||
case '减少':
|
|
||||||
return { count: state.count - 1 };
|
|
||||||
default:
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const Counter = () => {
|
|
||||||
const [state, dispatch] = useReducer(reducer, initialState);
|
|
||||||
|
|
||||||
const increment = () => {
|
|
||||||
dispatch({ type: '增加' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const decrement = () => {
|
|
||||||
dispatch({ type: '减少' });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>Count: {state.count}</p>
|
|
||||||
<button onClick={increment}>+1</button>
|
|
||||||
<button onClick={decrement}>-1</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
在上面示例中，定义了一个状态管理函数 `reducer` 和初始状态 `initialState`。`useReducer` 返回当前状态和派发动作的函数，可以通过调用派发函数来更新状态。每次点击增加或减少按钮时，派发相应的动作，更新 `count` 的值。
|
|
||||||
|
|
||||||
**useRef** ：
|
|
||||||
|
|
||||||
`useRef` 允许在函数式组件中创建可变的引用。它返回一个可变的 ref 对象，可以在组件的整个生命周期内存储和访问值。以下是`useRef` 的使用示例：
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const TextInput = () => {
|
|
||||||
const inputRef = useRef();
|
|
||||||
|
|
||||||
const focusInput = () => {
|
|
||||||
inputRef.current.focus();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<input type="text" ref={inputRef} />
|
|
||||||
<button onClick={focusInput}>Focus Input</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
在上面示例中，创建了一个 `inputRef` 引用，并将其赋值给文本输入框的 `ref` 属性。在 `focusInput` 函数中，通过 `inputRef.current` 可以访问文本输入框的 DOM 节点。点击按钮时，调用 `focusInput` 函数会使文本输入框获取焦点。
|
|
||||||
|
|
||||||
### 响应式（规划）
|
|
||||||
|
|
||||||
## React项目迁移
|
|
||||||
|
|
||||||
### 场景一：项目不打包React
|
|
||||||
|
|
||||||
该情况是指项目没有将React源码打包，默认使用externals方式的配置 ，在该场景下可以通过如下步骤将React项目迁移至InulaJS：
|
|
||||||
|
|
||||||
**1、修改webpack配置文件中`externals`，名称修改为`inulajs`，如下：**
|
|
||||||
|
|
||||||
```js
|
|
||||||
externals: {
|
|
||||||
react: 'inulajs', // React 修改成 inulajs
|
|
||||||
'react-dom': 'inulajs', // ReactDOM 修改成 inulajs
|
|
||||||
},
|
|
||||||
```
|
|
||||||
|
|
||||||
**2、修改.babelrc或webpack配置文件中`babel-loader`配置（解决编译后文件存留React.createElement的问题），如：**
|
|
||||||
|
|
||||||
如果你使用的是 `@babel/preset-react`，请确保版本号大于 `7.9.0`
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
"presets": [
|
|
||||||
"@babel/preset-react"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
修改为：
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
"presets": [
|
|
||||||
[
|
|
||||||
"@babel/preset-react",
|
|
||||||
{
|
|
||||||
"runtime": "automatic", // 新增
|
|
||||||
"importSource": "inulaJS" // 新增
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
如果你使用的是 `@babel/plugin-transform-react-jsx`，请确保版本号大于 `7.9.0`
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
"plugins": [
|
|
||||||
"@babel/plugin-transform-react-jsx"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
修改为：
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
"plugins": [
|
|
||||||
[
|
|
||||||
"@babel/plugin-transform-react-jsx",
|
|
||||||
{
|
|
||||||
"runtime": "automatic", // 新增
|
|
||||||
"importSource": "inulaJS" // 新增
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
注意：**.babelrc** 和 **webpack配置文件** 不要重复配置。
|
|
||||||
|
|
||||||
**3、删除webpack配置文件中的`cacheDirectory: true`，因为缓存可能会导致修改不生效，如：（原本用到才需修改）**
|
|
||||||
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
test: /\.(js|jsx)$/,
|
|
||||||
use: {
|
|
||||||
loader: 'babel-loader',
|
|
||||||
query: {
|
|
||||||
cacheDirectory: true, // 删除这一句，否则由于缓存可能会导致修改不生效
|
|
||||||
plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-dynamic-import'],
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
**4、在package.json中增加`"inulaJS": "0.0.x"`**
|
|
||||||
|
|
||||||
### 场景二：项目会打包React
|
|
||||||
|
|
||||||
该情况是指项目会将React源码打包，在该场景下可以通过如下步骤将React项目迁移至InulaJS：
|
|
||||||
|
|
||||||
**1、修改webpack配置文件中`alias`，新增react、react-dom别名，如下：**
|
|
||||||
|
|
||||||
```js
|
|
||||||
alias: {
|
|
||||||
// 省略其它...
|
|
||||||
'react': 'inulaJS', // 新增
|
|
||||||
'react-dom': 'inulaJS', // 新增
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**2、在package.json中增加`"inulaJS": "0.0.x"`**
|
|
||||||
|
|
||||||
## 贡献指南
|
## 贡献指南
|
||||||
|
|
||||||
本指南会指导你如何为InulaJS贡献自己的一份力量，请你在提出issue或pull request前花费几分钟来了解InulaJS社区的贡献指南。
|
本指南会指导你如何为InulaJS贡献自己的一份力量，请你在提出issue或pull request前花费几分钟来了解InulaJS社区的贡献指南。
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue