misc: update reactjs.org URLs to react.dev (#490)
This commit is contained in:
Zhou Yuhang
GitHub
parent
ab5c65bb10
commit
f85440a990
|
|
@ -78,8 +78,8 @@ The key idea behind components is for them to be reused and abstract complexitie
|
|||
- What are the configuration options you would allow for the component? (`props` in React). What would be reasonable defaults?
|
||||
- Follow the [Open-closed principle](https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle) - the component should be open for extension but closed for modification.
|
||||
- If your component is meant to be part of a UI library that doesn't bother about the appearance and leaves the styling to the user, extra care has to go into the design of the props and to allow users to customize the look and feel of the components. There are a few ways to go about this in React:
|
||||
- [Composition](https://reactjs.org/docs/composition-vs-inheritance.html) - Props which accept React components which also promotes code reuse.
|
||||
- [Render props](https://reactjs.org/docs/render-props.html) are function props that a component uses to know what to render. It also helps in reusing behavior without bothering about the appearance.
|
||||
- [Composition](https://tkdodo.eu/blog/component-composition-is-great-btw) - Props which accept React components which also promotes code reuse.
|
||||
- [Render props](https://www.patterns.dev/react/render-props-pattern/) are function props that a component uses to know what to render. It also helps in reusing behavior without bothering about the appearance.
|
||||
- `className` or `style` props - Allows users to inject class names and/or styling attributes to inner DOM elements. This could have negative consequences but is still a common way of allowing user to customize component appearance.
|
||||
- Possible configuration options:
|
||||
- Lifecycle/event hooks - `onClick`, `onChange`, `onBlur`, `onFocus`, etc.
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ Listing all of React, Angular, and Vue (all front end view frameworks) is overki
|
|||
|
||||
Try to list **at least one and at most two** technologies that belong to the following categories. Not all categories will apply to you, so only include the relevant ones. Popular examples are shown below.
|
||||
|
||||
- **JavaScript libraries**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
|
||||
- **JavaScript libraries**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
|
||||
- **Metaframeworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
|
||||
- **State Management**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
|
||||
- **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ Listar React, Angular e Vue (todos frameworks de visualização de front-end) é
|
|||
|
||||
Tente listar **pelo menos uma e no máximo duas** tecnologias que pertençam às seguintes categorias. Nem todas as categorias se aplicarão a você, então inclua apenas as relevantes. Exemplos populares são mostrados abaixo.
|
||||
|
||||
- **Visualizar**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
|
||||
- **Visualizar**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
|
||||
- **Renderização Frameworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
|
||||
- **Gerenciamento de Estado**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
|
||||
- **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ social_title: 前端工程师简历指南 | 前端面试手册
|
|||
|
||||
尝试列出**至少一个且最多两个**属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。
|
||||
|
||||
* **JavaScript 库**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
|
||||
* **JavaScript 库**：[React](https://react.dev/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
|
||||
* **元框架**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
|
||||
* **状态管理**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
|
||||
* **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ There are multiple ways to initialize a UI component:
|
|||
|
||||
### jQuery-style
|
||||
|
||||
Before modern JavaScript UI libraries/frameworks like [React](https://reactjs.org/), [Angular](https://angular.io/), and [Vue](https://vuejs.org/) came into the picture, [jQuery](https://jquery.com/) (and [jQuery UI](https://jqueryui.com/)) was the most popular way to build UI. jQuery UI popularized the idea of initializing UI components via "constructors" which involved two arguments:
|
||||
Before modern JavaScript UI libraries/frameworks like [React](https://react.dev/), [Angular](https://angular.io/), and [Vue](https://vuejs.org/) came into the picture, [jQuery](https://jquery.com/) (and [jQuery UI](https://jqueryui.com/)) was the most popular way to build UI. jQuery UI popularized the idea of initializing UI components via "constructors" which involved two arguments:
|
||||
|
||||
1. **Root element**: A root DOM element to render the contents
|
||||
1. **Customization options**: Optional, additional, customization options usually in the form of a plain JavaScript object
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ Frequentemente, durante entrevistas de front-end, você será solicitado a const
|
|||
|
||||
### jQuery-style
|
||||
|
||||
Antes das modernas bibliotecas de IU JavaScript como [React](https://reactjs.org/), [Angular](https://angular.io/), e [Vue](https://vuejs.org/) aparecerem, [jQuery](https://jquery.com) (e [jQuery UI](https://jqueryui.com/)) era a maneira mais popular de construir a interface do usuário. A jQuery UI popularizou a ideia de inicializar os componentes da UI através de "construtores" que envolvia dois argumentos:
|
||||
Antes das modernas bibliotecas de IU JavaScript como [React](https://react.dev/), [Angular](https://angular.io/), e [Vue](https://vuejs.org/) aparecerem, [jQuery](https://jquery.com) (e [jQuery UI](https://jqueryui.com/)) era a maneira mais popular de construir a interface do usuário. A jQuery UI popularizou a ideia de inicializar os componentes da UI através de "construtores" que envolvia dois argumentos:
|
||||
|
||||
1. **Elemento Raiz**: Um elemento raiz da DOM para renderizar o conteúdo.
|
||||
2. **Opções de Customização**: Opcionais, opções adicionais de customização, geralmente na forma de um objeto JavaScript simples.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ social_title: UI 组件的 API 设计原则 | 前端面试手册
|
|||
|
||||
### jQuery 风格
|
||||
|
||||
在像 [React](https://reactjs.org/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，其中涉及两个参数：
|
||||
在像 [React](https://react.dev/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，其中涉及两个参数：
|
||||
|
||||
1. **根元素**：用于渲染内容的根 DOM 元素
|
||||
2. **自定义选项**：可选的、额外的、自定义选项，通常以纯 JavaScript 对象的形式
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ Most UI questions in interviews will require state and designing the state well
|
|||
|
||||
- **Determine the minimum state needed in your UI**: The smaller the state, the easier it is to read and understand the code -> lower likelihood for bugs. Identify essential state vs derived state. Derived state is state that can be calculated from essential state. By deriving the state on-the-fly you reduce the possibility of state values going out-of-sync.
|
||||
- **Separate rendering code vs data management code**: Make the UI a function of your data and separate your code into two parts (rendering code vs data management code) for better readability. If you use JavaScript frameworks such as React, you will more or less be forced to do so.
|
||||
- **Use the state-reducer pattern for complex state interactions**: If the question requires many state fields and certain actions require changing multiple fields at once, use a [reducer to consolidate state update logic](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). First popularized by Redux, the state-reducer pattern encourages you to determine the state of your UI, actions that can be taken, and how to combine actions with state to derive the next state. If you are using React, you can achieve this pattern via the [`useReducer` React hook](https://react.dev/reference/react/useReducer). Redux is usually overkill for interviews and `useReducer` should be sufficient.
|
||||
- **Use the state-reducer pattern for complex state interactions**: If the question requires many state fields and certain actions require changing multiple fields at once, use a [reducer to consolidate state update logic](https://react.dev/learn/extracting-state-logic-into-a-reducer). First popularized by Redux, the state-reducer pattern encourages you to determine the state of your UI, actions that can be taken, and how to combine actions with state to derive the next state. If you are using React, you can achieve this pattern via the [`useReducer` React hook](https://react.dev/reference/react/useReducer). Redux is usually overkill for interviews and `useReducer` should be sufficient.
|
||||
|
||||
[React's](https://beta.reactjs.org) docs on ["Managing State"](https://beta.reactjs.org/learn/managing-state) is an excellent resource on how to design and use component state correctly. Some of the ideas mentioned aren't specific to React and can be applied to any UI frameworks.
|
||||
[React's](https://react.dev/) docs on ["Managing State"](https://react.dev/learn/managing-state) is an excellent resource on how to design and use component state correctly. Some of the ideas mentioned aren't specific to React and can be applied to any UI frameworks.
|
||||
|
||||
## JavaScript
|
||||
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@ A maioria das perguntas de entrevistas relacionadas à interface do usuário exi
|
|||
- **Determine o estado mínimo necessário em sua interface do usuário**: Quanto menor o estado, mais fácil é ler e entender o código -> menor probabilidade de erros.
|
||||
- Identificar o estado essencial versus o estado derivado. Estado derivado é um estado que pode ser calculado a partir do estado essencial.
|
||||
- **Separe o código de renderização do código de gerenciamento de dados**: Torne a interface do usuário uma função de seus dados e separe seu código em dois grupos (código de renderização e código de gerenciamento de dados) para uma melhor legibilidade. Se você estiver usando frameworks JavaScript como o React, mais ou menos será obrigado a fazer isso.
|
||||
- **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
|
||||
- **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://react.dev/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://react.dev/reference/react/useReducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
|
||||
|
||||
A documentação do [React](https://beta.reactjs.org) sobre ["Gerenciamento de Estado"](https://beta.reactjs.org/learn/managing-state) é um excelente recurso sobre como projetar e usar o estado de componentes corretamente. Algumas das ideias mencionadas não são específicas do React e podem ser aplicadas a qualquer estrutura de interface do usuário (UI).
|
||||
A documentação do [React](https://react.dev/) sobre ["Gerenciamento de Estado"](https://react.dev/learn/managing-state) é um excelente recurso sobre como projetar e usar o estado de componentes corretamente. Algumas das ideias mencionadas não são específicas do React e podem ser aplicadas a qualquer estrutura de interface do usuário (UI).
|
||||
|
||||
## JavaScript
|
||||
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ social_title: 用户界面问题备忘单 | 前端面试手册
|
|||
|
||||
* **确定 UI 中所需的最少状态**: 状态越小，代码就越容易阅读和理解 -> 出现错误的概率越低。 确定基本状态与派生状态。 派生状态是可以从基本状态计算出来的状态。 通过即时派生状态，您可以减少状态值不同步的可能性。
|
||||
* **分离渲染代码与数据管理代码**: 使 UI 成为数据的函数，并将代码分成两部分（渲染代码与数据管理代码），以提高可读性。 如果您使用 JavaScript 框架（例如 React），您或多或少会被迫这样做。
|
||||
* **对复杂的状态交互使用状态-reducer 模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来合并状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以采取的操作以及如何将操作与状态结合起来以推导出下一个状态。 如果您使用 React，您可以通过 [`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer) 实现此模式。 Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。
|
||||
* **对复杂的状态交互使用状态-reducer 模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来合并状态更新逻辑](https://react.dev/learn/extracting-state-logic-into-a-reducer)。 状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以采取的操作以及如何将操作与状态结合起来以推导出下一个状态。 如果您使用 React，您可以通过 [`useReducer` React hook](https://react.dev/reference/react/useReducer) 实现此模式。 Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。
|
||||
|
||||
[React 的](https://beta.reactjs.org) 关于 [“管理状态”](https://beta.reactjs.org/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的绝佳资源。提到的一些想法并非特定于 React，可以应用于任何 UI 框架。
|
||||
[React 的](https://react.dev/) 关于 [“管理状态”](https://react.dev/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的绝佳资源。提到的一些想法并非特定于 React，可以应用于任何 UI 框架。
|
||||
|
||||
## JavaScript
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ User interface coding interviews share a fair bit of similarity with non-front e
|
|||
1. **Core concepts**: Be familiar with the topics under the [Important concepts](#important-concepts) section below. The [Quiz section](/front-end-interview-playbook/quiz) can also be a good start since you might be asked on these concepts in the form of quiz questions during coding.
|
||||
1. **Practice writing UI**: It's best to learn how to build UIs in both Vanilla JavaScript and a UI framework of choice. Most companies will allow using JavaScript UI frameworks but some companies (e.g. Google) mandate that you can only use Vanilla JavaScript
|
||||
- **Vanilla JavaScript**: Learn the DOM manipulation APIs. At the very least you should know how to create new DOM elements, add classes/attributes to them, and add child elements. If you come from a [jQuery](https://jquery.com/) background, check out [You might not need jQuery](https://youmightnotneedjquery.com), a website showing you how to accomplish the common jQuery operations in Vanilla JavaScript. You will be pleasantly surprised to find out that with modern browser APIs there isn't really much need for jQuery anymore.
|
||||
- **JavaScript UI framework**: Be familiar with a UI framework of choice. Stick with the framework that you are most familiar with. There's no need and also probably not enough time to learn a new framework. If you are new to JavaScript UI frameworks, [React](https://reactjs.org/) will be our recommendation as it is the most popular library/framework to build UI right now and what most companies look for when hiring front end engineers.
|
||||
- **JavaScript UI framework**: Be familiar with a UI framework of choice. Stick with the framework that you are most familiar with. There's no need and also probably not enough time to learn a new framework. If you are new to JavaScript UI frameworks, [React](https://react.dev/) will be our recommendation as it is the most popular library/framework to build UI right now and what most companies look for when hiring front end engineers.
|
||||
1. **CSS**: Be familiar with writing CSS under interview conditions (small questions which won't require writing that much CSS):
|
||||
- **Write Vanilla CSS**: Learn to write CSS without reliance on preprocessors like Sass/Less. Not all coding environments will allow using processors and interview questions are likely small and do not really benefit from the features CSS preprocessors bring. The most useful feature of CSS processors is the use of variables, which is available natively via CSS custom properties (CSS variables).
|
||||
- **Adopt a CSS naming convention**: Consider adopting a CSS naming methodology like [Block Element Modifier](https://getbem.com) when writing your classes.
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
|
|||
1. Esteja familiarizado com os tópicos listados em "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-playbook/quiz) também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
|
||||
2. É melhor aprender a construir interfaces de usuário tanto em JavaScript puro quanto em um framework de UI de sua escolha. A maioria das empresas permitirá o uso de frameworks de UI JavaScript, mas algumas empresas (por exemplo, o Google) podem exigir que você use apenas JavaScript puro.
|
||||
- **JavaScript Puro**: Aprenda as APIs de manipulação do DOM. No mínimo, você deve saber como criar novos elementos no DOM, adicionar classes/atributos a eles e adicionar elementos filhos. Se você tem experiência com [jQuery](https://jquery.com/), dê uma olhada em [You might not need jQuery](https://youmightnotneedjquery.com), um site que mostra como realizar operações comuns do jQuery em JavaScript puro. Você ficará agradavelmente surpreso ao descobrir que, com as APIs de navegadores modernos, realmente não há mais tanta necessidade do jQuery.
|
||||
- **Framework de Interface do Usuário em JavaScript**: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, [React](https://reactjs.org/) será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
|
||||
- **Framework de Interface do Usuário em JavaScript**: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, [React](https://react.dev/) será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
|
||||
3. Esteja familiarizado com a escrita de CSS em condições de entrevista (pequenas perguntas que não exigirão escrever muito CSS):
|
||||
- **Escreva Vanilla CSS**: aprenda a escrever CSS sem depender de pré-processadores como Sass/Less. Nem todos os ambientes de codificação permitirão o uso de processadores, e as perguntas de entrevista provavelmente serão pequenas e não se beneficiarão muito dos recursos que os pré-processadores de CSS oferecem. A característica mais útil dos processadores de CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas de CSS (variáveis CSS).
|
||||
- **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como [Block Element Modifier](https://getbem.com) ao escrever suas classes.
|
||||
|
|
@ -104,7 +104,7 @@ Com base na experiência, as melhores perguntas de entrevista de interface do us
|
|||
- Menu dropdown
|
||||
- Modal
|
||||
|
||||
"GreatFrontEnd possui uma [lista abrangente de perguntas de codificação de Interface de Usuário](/questions) que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e [React](https://reactjs.org/)).". Também fornecemos casos de teste manuais que você pode usar para testar seu código e verificar a correção, além de soluções escritas em várias estruturas de interface de usuário JavaScript por engenheiros sênior ex-FAANG. Testes automatizados não são fornecidos para perguntas de IU (Interface de Usuário) porque geralmente estão acoplados à implementação e são difíceis de serem testados com precisão por meio de testes automatizados. Além disso, durante entrevistas, provavelmente você terá que testar sua IU por si mesmo.
|
||||
"GreatFrontEnd possui uma [lista abrangente de perguntas de codificação de Interface de Usuário](/questions) que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e [React](https://react.dev/)).". Também fornecemos casos de teste manuais que você pode usar para testar seu código e verificar a correção, além de soluções escritas em várias estruturas de interface de usuário JavaScript por engenheiros sênior ex-FAANG. Testes automatizados não são fornecidos para perguntas de IU (Interface de Usuário) porque geralmente estão acoplados à implementação e são difíceis de serem testados com precisão por meio de testes automatizados. Além disso, durante entrevistas, provavelmente você terá que testar sua IU por si mesmo.
|
||||
|
||||
Muitas das perguntas de codificação do GreatFrontEnd também são divididas em estágios, que ficam progressivamente mais difíceis. Nas entrevistas, seu entrevistador pode solicitar explicitamente apenas a funcionalidade básica. No entanto, após concluir a funcionalidade básica, você pode tomar a iniciativa de adicionar mais recursos para aprimorar a versão básica e lidar com mais casos especiais. Um exemplo de uma pergunta dividida em estágios:
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ social_title: 破解用户界面问题 | 前端面试手册
|
|||
1. **核心概念**：熟悉下面 [重要概念](#important-concepts) 部分的主题。 [测验部分](/front-end-interview-playbook/quiz) 也可以作为一个好的开始，因为在编码过程中，你可能会被问到这些概念的测验问题。
|
||||
2. **练习编写 UI**：最好学习如何使用 Vanilla JavaScript 和你选择的 UI 框架来构建 UI。 大多数公司都允许使用 JavaScript UI 框架，但有些公司（例如 Google）强制要求你只能使用 Vanilla JavaScript
|
||||
* **Vanilla JavaScript**：学习 DOM 操作 API。 至少你应该知道如何创建新的 DOM 元素，向它们添加类/属性，以及添加子元素。 如果你来自 [jQuery](https://jquery.com/) 背景，请查看 [你可能不需要 jQuery](https://youmightnotneedjquery.com)，这是一个网站，向你展示如何在 Vanilla JavaScript 中完成常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API 已经不再需要 jQuery 了。
|
||||
* **JavaScript UI 框架**：熟悉你选择的 UI 框架。 坚持使用你最熟悉的框架。 没有必要，也可能没有足够的时间来学习新的框架。 如果你刚接触 JavaScript UI 框架，[React](https://reactjs.org/) 将是我们的推荐，因为它是目前构建 UI 最流行的库/框架，也是大多数公司在招聘前端工程师时所寻找的。
|
||||
* **JavaScript UI 框架**：熟悉你选择的 UI 框架。 坚持使用你最熟悉的框架。 没有必要，也可能没有足够的时间来学习新的框架。 如果你刚接触 JavaScript UI 框架，[React](https://react.dev/) 将是我们的推荐，因为它是目前构建 UI 最流行的库/框架，也是大多数公司在招聘前端工程师时所寻找的。
|
||||
3. **CSS**：熟悉在面试条件下编写 CSS（小问题，不需要编写那么多 CSS）：
|
||||
* **编写 Vanilla CSS**：学习编写 CSS，不依赖于 Sass/Less 等预处理器。 并非所有编码环境都允许使用处理器，并且面试问题可能很小，实际上并没有从 CSS 预处理器带来的功能中受益。 CSS 处理器最有用的功能是使用变量，这可以通过 CSS 自定义属性（CSS 变量）本地获得。
|
||||
* **采用 CSS 命名约定**：考虑在编写类时采用 CSS 命名方法，例如 [Block Element Modifier](https://getbem.com)。
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ HOCs are useful for:
|
|||
|
||||
Higher-order components were more useful in the pre-hooks era for adding functionality to components. Now that we have React hooks and the ability to create custom hooks, HOCs are no longer that widespread.
|
||||
|
||||
Further reading on react.dev: [Higher-Order Components – React](https://legacy.reactjs.org/docs/higher-order-components.html)
|
||||
Further reading on react.dev: [Higher-Order Components – React](https://www.patterns.dev/react/hoc-pattern/)
|
||||
|
||||
## Render props
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ Render props are useful for:
|
|||
- Scenarios where hooks aren't an option, such as class components
|
||||
- Headless components that provide logic and behavior while allowing customization of appearance
|
||||
|
||||
Further reading on react.dev: [Render Props - React](https://legacy.reactjs.org/docs/render-props.html)
|
||||
Further reading on react.dev: [Render Props - React](https://www.patterns.dev/react/render-props-pattern/)
|
||||
|
||||
## Container/presentational pattern
|
||||
|
||||
|
|
|
|||
|
|
@ -32,8 +32,6 @@ HOC 适用于：
|
|||
|
||||
高阶组件在 pre-hooks 时代对于向组件添加功能更有用。现在我们有了 React 钩子以及创建自定义钩子的能力，HOC 已经不再那么普遍。
|
||||
|
||||
在 react.dev 上进一步阅读：[高阶组件 – React](https://legacy.reactjs.org/docs/higher-order-components.html)
|
||||
|
||||
## 渲染道具
|
||||
|
||||
渲染道具涉及将一个渲染元素的函数作为 prop 传递给一个组件。该组件使用某些参数（通常是其自身的状态）调用该 prop。
|
||||
|
|
@ -75,8 +73,6 @@ function App() {
|
|||
* 无法使用钩子的情况，例如类组件
|
||||
* 提供逻辑和行为的无头组件，同时允许自定义外观
|
||||
|
||||
在 react.dev 上进一步阅读：[渲染道具 - React](https://legacy.reactjs.org/docs/render-props.html)
|
||||
|
||||
## 容器/展示模式
|
||||
|
||||
容器/展示模式是 React 中使用的一种设计模式，用于将状态管理（逻辑）与 UI 渲染（展示）分开。它通过确保关注点的明确分离，有助于使组件可重用、可维护和可测试。
|
||||
|
|
|
|||
Loading…
Reference in New Issue