diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 052aecb33..735b55208 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -1,20 +1,20 @@ --- id: hooks-state -title: Using the State Hook +title: Usando o State do Hook permalink: docs/hooks-state.html next: hooks-effect.html prev: hooks-overview.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +_Hooks_ são uma nova adição ao React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe. -The [previous page](/docs/hooks-intro.html) introduced Hooks with this example: +A [página anterior](/docs/hooks-intro.html) introduziu Hooks com o seguinte exemplo: ```js{4-5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Declarar uma nova variável de state, na qual chamaremos de "count" const [count, setCount] = useState(0); return ( @@ -28,11 +28,11 @@ function Example() { } ``` -We'll start learning about Hooks by comparing this code to an equivalent class example. +Vamos começar a aprender sobre Hooks comparando este código com um exemplo equivalente utilizando classe. -## Equivalent Class Example {#equivalent-class-example} +## Exemplo Equivalente com Classe {#equivalent-class-example} -If you used classes in React before, this code should look familiar: +Se você já usou classes no React, este código deve parecer familiar: ```js class Example extends React.Component { @@ -56,39 +56,39 @@ class Example extends React.Component { } ``` -The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page. +O state começa como `{ count: 0 }`, e aumentamos o `state.count` chamando `this.setState()` quando o usuário clica no botão. Vamos utilizar trechos dessa classe ao longo da página. ->Note +>Nota > ->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks. +>Você pode estar se perguntando porque estamos usando um counter aqui ao invés de um exemplo mais realista. Isto é pra nos ajudar a focar na API enquanto ainda damos os primeiros passos com Hooks. -## Hooks and Function Components {#hooks-and-function-components} +## Hooks e Componentes de Função {#hooks-and-function-components} -As a reminder, function components in React look like this: +Para lembrar, componentes de função, no React, se parecem com isto: ```js const Example = (props) => { - // You can use Hooks here! + // Você pode usar Hooks aqui! return
; } ``` -or this: +ou isto: ```js function Example(props) { - // You can use Hooks here! + // Você pode usar Hooks aqui! return
; } ``` -You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components". +Você pode ter conhecido estes exemplos como "componentes sem estado". Nós estamos introduzindo a habilidade de utilizar o state do React neles, portanto preferimos o nome "componentes de função". -Hooks **don't** work inside classes. But you can use them instead of writing classes. +Hooks **não** funcionam dentro de classes. Mas você pode usá-los em vez de escrever classes. -## What's a Hook? {#whats-a-hook} +## O que é um Hook? {#whats-a-hook} -Our new example starts by importing the `useState` Hook from React: +Nosso novo exemplo começa importando o `useState` Hook do React: ```js{1} import React, { useState } from 'react'; @@ -98,17 +98,17 @@ function Example() { } ``` -**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later. +**O que é um Hook?** Um Hook é uma função especial que te permite utilizar recursos do React. Por exemplo, `useState` é um Hook que te permite adicionar o state do React a um componente de função. Vamos aprender outros Hooks mais tarde. -**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now! +**Quando eu deveria usar um Hook?** Se você escreve um componente de função e percebe que precisa adicionar algum state para ele, anteriormente você tinha que convertê-lo para uma classe. Agora você pode usar um Hook dentro de um componente de função existente. Vamos fazer isso agora mesmo! ->Note: +>Nota: > ->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html). +>Existem algumas regras especiais sobre onde você pode ou não utilizar Hooks dentro de um componente. Vamos aprender elas nas [Regras dos Hooks](/docs/hooks-rules.html). -## Declaring a State Variable {#declaring-a-state-variable} +## Declarando uma Variável State {#declaring-a-state-variable} -In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor: +Em uma classe, inicializamos o state `count` para `0` definindo `this.state` para `{ count: 0 }` no construtor: ```js{4-6} class Example extends React.Component { @@ -120,58 +120,57 @@ class Example extends React.Component { } ``` -In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component: +Em um componente de função, não temos `this`, portanto não podemos definir ou ler `this.state`. Em vez disso, chamamos o Hook `useState` dentro do nosso component: ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Declarar uma nova variável de state, na qual chamaremos de "count" const [count, setCount] = useState(0); ``` -**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React. +**O que o `useState` faz?** Ele declara um variável state. Nossa variável é chamada de `count` mas poderíamos chamar de qualquer coisa, como `banana`. Esta é uma maneira de "preservar" alguns valores entre as chamadas de funções — `useState` é uma nova maneira de usar as mesmas capacidades que o `this.state` tem em uma classe. Normalmente, variáveis "desaparecem" quando a função sai mas variáveis de state são preservadas pelo React. -**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.) +**O que passamos para o `useState` como argumento?** O único argumento para o Hook `useState()` é o state inicial. Diferente de classes, o state não tem que ser um objeto. Podemos manter um número ou uma string se for tudo que precisamos. No nosso exemplo, apenas queremos um número para quantas vezes o usuário clicou, então passamos 0 como state inicial para nossa variável. (Se quiséssemos guardar dois valores diferentes no state, chamaríamos `useState()` duas vezes.) -**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean). +**O que `useState` retorna?** Ele retorna um par de valores: o state atual e uma função que atualiza o state. É por isso que escrevemos `const [count, setCount] = useState()`. Isto é similar ao `this.state.count` e `this.setState` em uma classe, exceto o fato de pegá-los em par. Se você não está familiarizado com a sintaxe que usamos, vamos voltar nisso [no final dessa página](/docs/hooks-state.html#tip-what-do-square-brackets-mean). -Now that we know what the `useState` Hook does, our example should make more sense: +Agora que sabemos o que o Hook `useState` faz, nosso exemplo deve fazer mais sentido: ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Declarar uma nova variável de state, na qual chamaremos de "count" const [count, setCount] = useState(0); ``` -We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`. +Nós declaramos uma variável state chamada `count` e definimos ela para 0. O React vai lembrar o valor atual entre cada re-renderização e fornecer o valor mais recente para nossa função. Se quisermos atualizar o `count` atual, podemos chamar `setCount`. ->Note +>Nota > ->You might be wondering: why is `useState` not named `createState` instead? +>Você pode estar se perguntando: Por que é chamado `useState` ao invés de `createState`? > ->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html). +>"Create" não seria muito preciso porque o state é criado apenas na primeira vez que nosso componente renderiza. Durante as próximas renderizações, `useState` nos da o state atual. Caso contrário, não seria "state" de qualquer maneira! Também tem outro motivo pelo qual nomes de Hook sempre começam com `use`. Vamos aprender o porque depois, nas [Regras dos Hooks](/docs/hooks-rules.html). -## Reading State {#reading-state} +## Lendo o State {#reading-state} -When we want to display the current count in a class, we read `this.state.count`: +Quando queremos mostrar o count atual em classe, lemos `this.state.count`: ```js

You clicked {this.state.count} times

``` -In a function, we can use `count` directly: - +Em uma função, podemos usar `count` diretamente: ```js

You clicked {count} times

``` -## Updating State {#updating-state} +## Atualizando o State {#updating-state} -In a class, we need to call `this.setState()` to update the `count` state: +Em uma classe, podemos chamar `this.setState()` para atualizar o state `count`: ```js{1} ``` -In a function, we already have `setCount` and `count` as variables so we don't need `this`: +Na função, já temos `setCount` e `count` como variáveis então não precisamos do `this`: ```js{1} ``` -## Recap {#recap} +## Recapitulação {#recap} -Let's now **recap what we learned line by line** and check our understanding. +Vamos **recapitular o que aprendemos linha por linha** e checar nosso entendimento.