前端技术总结.docx

在前端开发领域，React、Vue、ES6、TypeScript 和 JavaScript 是常见的技术栈。这篇文档主要涵盖了使用这些技术时的一些关键点，以下是其中的具体内容： 一、React React 是一个用于构建用户界面的 JavaScript 库，它引入了JSX语法，使得HTML和JavaScript能更好地融合。JSX 类似于 XML，允许我们在JavaScript中编写结构化的代码。TypeScript 为JSX提供了类型检查和强大的工具支持，增强了代码的可维护性。 1. JSX 的两种写法： - 使用花括号 `{}`：在需要返回DOM元素或组件的情况下，需要使用花括号将内容包裹起来。例如： ```jsx const arr = []; arr.map((item, index) => { return <div key={index}>{item}</div>; }); ``` - 不使用花括号：如果直接返回DOM元素或组件，可以省略花括号。例如： ```jsx const arr = []; arr.map((item, index) => <div key={index}>{item}</div>); ``` 2. 有状态组件：React组件分为有状态和无状态（函数式）两种。有状态组件通过`class`关键字定义，使用`state`对象存储数据。在构造函数中初始化`state`，并通过`props`接收父组件传递的属性。例如： ```jsx class Header extends React.Component { constructor(props) { super(props); this.state = { nameOne: props.name, nameTwo: props.nameTwo, }; } render() { return <div>{this.state.nameOne}{this.state.nameTwo}</div>; } } ``` 二、路由（react-router） React Router 是一个基于 React 的路由库，用于管理应用的导航。它使组件与URL路径关联，实现页面间的无刷新跳转。 三、父子组件传值 React 中通过`props`从父组件向子组件传递数据。子组件不能直接修改父组件的`props`，但可以通过回调函数（事件处理）通知父组件来实现数据的更新。 四、回调函数（针对 hooks 组件） 在函数式组件中，我们可以使用`useState`和`useEffect`等hooks来管理状态和副作用。回调函数常用于`onChange`、`onClick`等事件处理，实现组件间通信。 五、修改 ant design 组件样式 Ant Design 是一个流行的React UI库，可以通过自定义CSS类或使用其提供的`style`属性来修改组件样式。 六、ES6 功能用法 ES6（ECMAScript 2015）引入了许多新特性，如箭头函数、解构赋值、模板字符串、类和模块等，提升了JavaScript的开发体验。 七、JSX JSX 是 React 的核心，它允许在JavaScript中书写类似HTML的代码，方便创建和组合UI组件。 八、Localstorage 和 Sessionstorage 的区别 - LocalStorage：数据在浏览器关闭后仍会保留，直到被手动清除。 - SessionStorage：数据只在当前会话（浏览器窗口）中有效，关闭窗口后数据会被清除。 九、常见问题总结 文档中可能包含了React生命周期方法的使用、错误处理、性能优化、状态管理（如Redux）等常见问题的解决方案。 这个文档是作者在实践中积累的前端技术点，对于学习和提升React、TypeScript等前端技能具有很好的参考价值。通过阅读和实践，开发者可以深入理解这些技术的使用方法和最佳实践。