印客大厂前端工程师训练营心得

2024-04-19 17:19:56 浏览数 (1)

印客学院大厂前端工程师训练营

JS 模块化介绍

JavaScript 模块化是指将JavaScript代码划分为独立、可重用的模块，每个模块包含特定的功能。模块化有助于代码的组织、维护和重用，并且可以避免命名空间的冲突。随着JavaScript的不断发展，模块化方案也经历了几个阶段的演变。

印客学院大厂前端工程师训练营 Vue性能优化实战

Vue 性能优化是一个广泛的话题，涉及多个方面，包括组件设计、数据处理、渲染优化、代码拆分、懒加载等等。下面是一些实战性能优化技巧：

  1. 组件设计优化：
    • 合理划分组件，避免组件过大，拆分为更小的组件，提高组件的可维护性和复用性。
    • 使用异步组件进行按需加载，减小首次加载时的资源体积。
    • 避免不必要的组件重新渲染，使用 shouldComponentUpdate 或 Vue 的 v-once 等技术来优化。
  2. 数据处理优化：
    • 避免过度渲染：使用计算属性（computed）和 watch 来确保只有在必要时才重新计算和渲染数据。
    • 对大型列表使用虚拟滚动，减少 DOM 元素数量，提高页面性能。
  3. 渲染优化：
    • 使用 v-if 替代 v-show 来在需要时进行条件渲染，减少不必要的 DOM 元素。
    • 合理使用 key，确保 Vue 能够正确地复用和更新 DOM 元素，减少不必要的 DOM 操作。
    • 避免直接操作 DOM，尽量使用 Vue 提供的指令和方法。
  4. 代码拆分和懒加载：
    • 将代码拆分为多个模块，并按需加载这些模块，减小首次加载时的文件大小。
    • 使用路由懒加载和动态导入来延迟加载页面组件和相关资源。
  5. 图片优化：
    • 使用合适的图片格式，并压缩图片以减小文件大小。
    • 使用懒加载技术，只加载可视区域内的图片，减少页面加载时间。
  6. 网络请求优化：
    • 减少网络请求次数，合并请求或使用缓存技术。
    • 使用 CDN 加速静态资源的加载速度。
  7. SSR（服务器端渲染）：
    • 对于需要 SEO 优化或快速首屏加载的应用，考虑使用 Vue 的服务器端渲染（SSR）。
  8. 性能监控与调优：
    • 使用浏览器的性能分析工具（如 Chrome 的开发者工具）来分析页面的性能瓶颈，并针对性地进行优化。
    • 使用第三方工具（如 Lighthouse）进行页面性能评估和监控。

React.js ⾼级⽤法

React.js 是一个用于构建用户界面的开源JavaScript库，由Facebook维护。它以组件化和声明式编程范式著称，非常适合构建可重用的用户界面组件。以下是一些React.js的高级用法：

1. 高阶组件 (HOC)

高阶组件是一种基于React组合特性的高级技巧，它不是通过继承，而是通过组合来复用组件逻辑。

代码语言：jsx复制
function withData(WrappedComponent) {
  return class extends React.Component {
    // ...逻辑
    render() {
      return <WrappedComponent {...this.props} data={this.state.data} />;
    }
  };
}

const EnhancedComponent = withData(OriginalComponent);

2. 函数作为子组件 (FaaSC)

在React中，你可以将函数作为子组件，这些函数接收父组件的props作为参数，并返回一个React元素。

代码语言：jsx复制
function ComponentWithFunctionAsChildren({ children }) {
  return <div>{children}</div>;
}

// 使用函数作为子组件
<ComponentWithFunctionAsChildren>
  {(props) => <div>{props.text}</div>}
</ComponentWithFunctionAsChildren>

3. Render Props

Render Props是一种技术，允许你在组件之间传递一个名为render的函数，该函数返回一个React元素。

代码语言：jsx复制
class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    });
  };

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

const App = () => (
  <MouseTracker render={({ x, y }) => <div>Mouse down at {x}, {y}</div>} />
);

4. 状态提升 (State Lifting)

状态提升是一种将多个组件的共享状态提升到它们共同的父组件中的技术。

代码语言：jsx复制
class App extends React.Component {
  state = { count: 0 };

  incrementCount = () => {
    this.setState({ count: this.state.count   1 });
  };

  render() {
    return (
      <div>
        <Counter count={this.state.count} onIncrement={this.incrementCount} />
        {/* 更多组件 */}
      </div>
    );
  }
}

5. 使用Context API

Context API允许你在组件树之间传递数据，而不必手动传递props。

代码语言：jsx复制
// 创建Context
const ThemeContext = React.createContext('light');

class App extends React.Component {
  state = { theme: 'light' };

  toggleTheme = () => {
    this.setState(state => ({
      theme: state.theme === 'light' ? 'dark' : 'light'
    }));
  };

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        <button onClick={this.toggleTheme}>Toggle theme</button>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  // 使用Context消费主题
  return (
    <ThemeContext.Consumer>
      {theme => <div className={theme}>Toolbar</div>}
    </ThemeContext.Consumer>
  );
}

6. 使用Fragment和Portals

React中的Fragment允许你将子列表分组，而无需向DOM添加额外节点。Portals提供了一种将子节点渲染到存在于父组件之外的DOM节点的方法。

代码语言：jsx复制
// Fragment
<React.Fragment>
  <ComponentA />
  <ComponentB />
</React.Fragment>

// Portals
const modalRoot = document.getElementById('modal-root');
ReactDOM.createPortal(modal, modalRoot);

7. 错误边界 (Error Boundaries)

错误边界是一种React组件，用于捕获并打印来自其子组件树的JavaScript错误，防止这些错误导致整个应用崩溃。

代码语言：jsx复制
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

8. 性能优化

React允许开发者进行多种性能优化，包括但不限于使用shouldComponentUpdate、React.memo、避免不必要的重新渲染、使用useCallback钩子避免在每次渲染时创建函数等。

代码语言：jsx复制
// 使用React.memo进行性能优化
const MyComponent = React.memo(function MyComponent(props) {
  // 组件逻辑
});

// 使用useCallback钩子避免不必要的函数创建
const memoizedCallback = useCallback(() => {
  // ...
}, [dependency]);

React.js的高级用法还包括很多其他模式和技巧，如代码分割、使用useReducer、自定义钩子等。掌握这些高级用法可以帮助开发者构建更高效、更健壮的React应用。

前端

0 人点赞