React与antd入门：组件、生命周期与父子通信详解

本文档主要介绍了如何在React应用中使用Ant Design (antd)的基本用法，结合了React的基础概念和实践技巧。首先，它强调了React和ReactDOM的作用，React作为JavaScript解释器，用于构建JavaScript DOM树，而ReactDOM则是将这个DOM树渲染到浏览器的工具。 1. React基础设置： - 在开发环境中，推荐使用VS Code并配置HTML代码自动补全功能，可以通过设置->首选项来实现，提高编码效率。 - 组件的导入方式有两种：`import React from 'react'` 或者 `import { React, Component } from 'react'`，后者引入了React和Component两个对象。 2. 组件规范与注释： - 组件名需遵循驼峰命名法，如`MyComponent`。在代码中，建议在render函数外部使用传统的JS注释，而在`render`内部使用块级注释`{/* ... */}`以清晰地标注内容。 3. React生命周期方法： - 组件生命周期分为创建阶段、实例化阶段和更新阶段。关键方法包括`getDefaultProps()`处理默认属性，`getInitialState()`初始化状态，以及`componentWillMount()`、`componentDidMount()`、`componentWillReceiveProps()`、`shouldComponentUpdate()`、`componentWillUpdate()`和`componentDidUpdate()`等，它们在不同的阶段执行不同的任务。 4. 状态管理： - React组件有两种状态管理方式：一种是通过构造函数的`super()`调用来初始化状态，另一种是通过`this.setState()`方法来动态更新状态。 5. 父子组件通信： - 父子组件之间的数据传递有多种方式，通常通过props进行单向数据流。文档链接提供了详细的笔记，讲解了不同场景下的父子组件传参方法。 6. 特定语法和技巧： - CSS样式可以通过对象字面量或变量形式嵌入，如`<Footer style={{ textAlign: 'center' }}>`或`let obj = { textAlign: 'center' }; <Footer style={obj}>`。 - 使用驼峰命名法书写类名，如`<Footer className="sd" />`。 - 注意处理HTML属性，例如设置`tabIndex`使用`<div tabIndex="-1" />`，与DOM API保持一致。 - CSS类名写法也应遵循驼峰命名，如`<div className="Button" />`。 这篇文章是React新手学习Ant Design库的一个实用指南，涵盖了React基础设置、组件结构、生命周期管理、状态管理以及一些常见的CSS和HTML语法技巧。通过阅读和实践，读者可以更好地掌握在实际项目中使用antd的技巧。