Dickens Shaw Frontend Knowledge Base

Beyond Redux, several other patterns exist for state management:

• Flux: A unidirectional data flow architecture using a central store to communicate between components.
• Dva: A framework based on Redux and Redux-Saga that integrates react-router and fetch to simplify development. Core concepts include State, View, Action, connect, and dispatch.
• MobX: A transparent functional reactive programming (TFRP) library. It uses observable objects and is more oriented toward Object-Oriented Programming (OOP) than Redux.

JavaScript provides several ways to handle asynchronous operations, each with different trade-offs:

• Callbacks: The basic method, but can lead to 'callback hell' with deep nesting and high coupling.
• Promises: Allows chaining of asynchronous operations to avoid nesting, though long chains can sometimes obscure semantic clarity.
• Generators: Functions that can pause and resume execution using yield. They allow asynchronous code to be written in a synchronous style, but typically require an external runner (like the co module) to automate execution.
• Async/Await: Syntactic sugar over Generators and Promises. It includes a built-in executor that pauses execution at await until a Promise resolves, allowing asynchronous logic to be written sequentially.

Key algorithmic strategies for problem solving:

• Divide and Conquer: Breaks a problem into identical sub-problems, solves them recursively, and merges the results.
• Dynamic Programming: Similar to Divide and Conquer, but stores the results of sub-problems to avoid redundant calculations.
• Greedy Algorithm: Makes the locally optimal choice at each step with the hope of finding a global optimum.
• Backtracking: Systematically tries different paths to find a solution, undoing steps when a path fails.
• Branch and Bound: Similar to backtracking but uses specific conditions/bounds to limit the number of paths explored.

Webpack processes source code through three primary phases:

1. Initialization: Starts the build, reads and merges configuration parameters, loads plugins, and instantiates the Compiler.
2. Compilation: Starts from the Entry point. For each module, it serially calls the corresponding Loader to translate file content and recursively compiles dependent modules.
3. Output: Combines compiled modules into Chunks, converts Chunks into files, and outputs them to the file system.

Enhance CSS development using the following tools:

• Preprocessors (e.g., Less, Sass, Stylus): Add programming features like variables, mixins, nesting, loops, and functions to increase code reuse and maintainability.
• Postprocessors (e.g., PostCSS): Process the final stylesheet to ensure efficiency and cross-browser compatibility, most commonly by automatically adding vendor prefixes.

The following methods are deprecated due to the introduction of React Fiber, which allows rendering to be interrupted, potentially causing these methods to be called multiple times:

• componentWillMount: Replace with constructor for initialization or componentDidMount for side effects.
• componentWillReceiveProps: Replace with getDerivedStateFromProps (a static method) to maintain a pure relationship between props and state without side effects.
• componentWillUpdate: Replace with componentDidUpdate to ensure callbacks are only executed once per update.

HTTPS (Hypertext Transfer Protocol Secure) is HTTP communicated over an encrypted layer using SSL/TLS. It is designed to prevent eavesdropping, tampering, and hijacking.

Core Security Functions:

• Identity Authentication: Verifies the server's identity via certificates.
• Data Encryption: Encrypts the HTTP request and response payloads to ensure privacy.
• Integrity Check: Ensures that the data has not been altered during transit.

A robust monitoring system consists of five layers:

1. Collection Layer: An SDK on PC/H5 monitors events and pushes data via REST API to Logback, which forwards it to Flume and then to Kafka.
2. Processing Layer: Flink consumes Kafka data for offline storage, real-time ETL/graphing, and detailed logging.
3. Storage Layer: HDFS (offline), MySQL (real-time ETL), and Elasticsearch (detailed logs).
4. Statistics Layer: Aggregates metrics at various intervals (minute, 10-minute, hourly).
5. Application/Display Layer: APIs query the storage to output charts, reports, and trace links.

The Diff algorithm compares the new and old Virtual DOM trees to identify changes and update only the necessary parts of the real UI.

• Trigger: Updates are typically triggered by state changes or Hook calls.
• Traversal: React uses a depth-first search (DFS) traversal.
• Optimization: To avoid the O(n³) complexity of a naive recursive tree comparison, React uses a divide-and-conquer approach to reduce the complexity of node comparisons.

Plugins extend Webpack's functionality by tapping into its event stream framework, Tapable. While loaders transform specific files, plugins can intercept the entire build lifecycle to modify the output or build process.

Basic Structure of a Plugin:

• A JavaScript named function or class.
• An apply method defined on the prototype.
• Binding to specific Webpack event hooks.
• Manipulation of internal Webpack instance data.
• Calling Webpack callbacks upon completion.