目录
- 1. 基本概念和语法
- 2. 组件化开发
- 3. 状态管理
- 4. 生命周期钩子
- 5. 条件渲染
- 6. 循环渲染
- 7. 事件处理
- 8. 组件间通信
- 9. 动画效果
- 10. 模块化开发
1. 基本概念和语法
React 是基于 JavaScript 的库，用于构建用户界面。它采用虚拟 DOM 技术，能够高效地渲染页面。React 的基本语法包括 JSX、组件、状态管理和生命周期钩子等。
示例：
import React from 'react';
class App extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; }handleClick = () => { this.setState({ count: this.state.count + 1 }); };render() { return ( <div> <h1>点击次数：{this.state.count}</h1> <button onClick={this.handleClick}>点击我</button> </div> ); }
}
export default App;
2. 组件化开发
React 采用组件化的方式来构建 UI。一个组件可以包含一个或多个 HTML 标签，以及 JavaScript 代码来控制它们的行为。组件可以拥有自己的状态和生命周期钩子，这使得它们可以更加灵活地响应用户交互和数据变化。
示例：
import React from 'react';
class Button extends React.Component { constructor(props) { super(props); this.state = { color: 'blue' }; }handleClick = () => { this.setState({ color: 'red' }); };render() { return ( <button style={{ color: this.state.color }} onClick={this.handleClick}> 点击我 </button> ); }
}
export default Button;
3. 状态管理
React 的状态管理是指将组件的状态与父组件的状态进行管理。通过在父组件中传递状态向下传递，或者通过在子组件中使用 context API 向上传递状态，可以实现状态的管理。
示例：
import React, { useState } from 'react';
const App = () => { const [count, setCount] = useState(0);const handleClick = () => { setCount(count + 1); };return ( <div> <h1>点击次数：{count}</h1> <button onClick={handleClick}>点击我</button> </div> );
};
export default App;
4. 生命周期钩子
React 的生命周期钩子是指在组件的生命周期中执行的一些函数。它们允许你在组件的不同阶段执行代码，例如在组件刚刚被创建时、组件被更新时、组件被销毁时等。
示例：
import React from 'react';
class App extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; }componentDidUpdate(prevProps) { if (prevProps.count!== this.props.count) { console.log('组件更新，计数器变化'); } }render() { return ( <div> <h1>点击次数：{this.state.count}</h1> <button onClick={this.props.onClick}>点击我</button> </div> ); }
}
export default App;
5. 条件渲染
React 的条件渲染是指根据某些条件来选择性地渲染组件。React 提供了 if-else 语句和逻辑表达式来实现条件渲染。
示例：
import React from 'react';
const App = () => { const [count, setCount] = useState(0);return ( <div> {count > 0 && ( <h1>点击次数：{count}</h1> )} <button onClick={() => setCount(count + 1)}>点击我</button> </div> );
};
export default App;
6. 循环渲染
React 的循环渲染是指通过遍历数组来重复地渲染组件。React 提供了 map 方法来实现循环渲染。map 方法接受一个函数作为参数，该函数返回一个数组，数组的元素是该函数对数组中每个元素调用后的返回值。
示例：
import React from 'react';
const App = () => { const list = ['a', 'b', 'c'];return ( <div> <ul> {list.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> );
};
export default App;
在上面的示例中，我们通过使用 list 数组的 map 方法来遍历数组并渲染 li 标签。每个 li 标签都包含数组中的每个元素。我们还使用 key 属性来为每个 li 标签提供唯一标识，以便在渲染时进行优化。
7. 事件处理
React 的事件处理是指在组件中处理用户交互事件，例如点击、键盘输入等。React 提供了 onClick、onKeyDown、onChange 等事件处理方法来处理各种事件。
示例：
import React from 'react';
const App = () => { const [count, setCount] = useState(0);return ( <div> <button onClick={() => setCount(count + 1)}>点击我</button> <p>计数器：{count}</p> </div> );
};
export default App;
在上面的示例中，我们通过使用 onClick 事件处理方法来处理用户点击按钮的事件。每当用户点击按钮时，setCount 函数会将计数器值加 1，并更新页面上的计数器显示。
8. 组件间通信
React 的组件间通信是指在组件之间传递数据、事件和状态等信息。React 提供了 props、context、state 和 ref 等方法来实现组件间通信。
示例：
import React, { useState } from 'react';
const App = () => { const [count, setCount] = useState(0);return ( <div> <button onClick={() => setCount(count + 1)}>点击我</button> <p>计数器：{count}</p> </div> );
};
export default App;
在上面的示例中，我们通过使用 props 将计数器值传递给父组件，然后通过 useState 钩子在子组件中更新计数器值。每当用户点击按钮时，setCount 函数会将计数器值加 1，并更新页面上的计数器显示。
9. 动画效果
React 的动画效果是指在组件中实现动画效果，例如过渡、旋转、缩放等。React 提供了 CSS 和 JS 动画效果来实现动画。
示例：
import React from 'react';
const App = () => { const [count, setCount] = useState(0);return ( <div> <button onClick={() => setCount(count + 1)}>点击我</button> <p>计数器：{count}</p> </div> );
};
export default App;
在上面的示例中，我们通过使用 CSS 过渡效果来实现按钮的动画效果。每当用户点击按钮时，setCount 函数会将计数器值加 1，并更新页面上的计数器显示。同时，按钮会根据计数器值逐渐改变颜色，实现动画效果。
10. 模块化开发
React 的模块化开发是指将应用程序拆分为多个模块，然后通过 import 语句将这些模块导入到应用程序中。React 提供了 import、export 和 module 等关键词来实现模块化开发。
通过模块化开发，可以提高应用程序的可维护性、可扩展性和可重用性。模块化开发可以使代码更加结构化、易于理解和维护，同时也可以避免代码重复和冲突。
在 React 中，可以使用 JSX 语法来定义模块，然后在其他组件中通过 import 语句导入这些模块。例如：
// 定义一个模块 called "MyModule"
import React from 'react';
const MyModule = () => { return <div>Hello, MyModule!</div>;
};
export default MyModule;
// 在其他组件中导入这个模块
import React from 'react';
import MyModule from './MyModule';
const App = () => { return ( <div> <MyModule /> </div> );
};
export default App;
在上面的示例中，我们定义了一个名为 “MyModule” 的模块，然后在其他组件中通过 import 语句导入了这个模块。在导入模块后，我们可以在组件中使用模块中的代码，例如在 App 组件中使用 MyModule 组件。
除了使用 import 语句导入模块外，还可以使用 export 语句来导出模块。通过 export 语句，可以将模块中的代码暴露出去，以便其他应用程序可以使用该模块。例如：
// 定义一个模块 called "MyModule"
import React from 'react';
const MyModule = () => { return <div>Hello, MyModule!</div>;
};
export default MyModule;
// 在其他组件中导入这个模块
import React from 'react';
import MyModule from './MyModule';
const App = () => { return ( <div> <MyModule /> </div> );
};
export default App;
在上面的示例中，我们定义了一个名为 “MyModule” 的模块，并通过 export 语句将该模块导出。然后在其他组件中通过 import 语句导入了这个模块，并在组件中使用模块中的代码。
