docs: Update Russian translation (#1242)

* Update blog/introducing-signals.md

* Update blog/preact-x.md

* Update guide/v10/differences-to-react.md

* Update guide/v10/hooks.md

* Update guide/v10/refs.md

* Update guide/v10/signals.md

* Update guide/v10/switching-to-preact.md

* Update guide/v10/typescript.md

* Update guide/v8/differences-to-react.md

* Update tutorial/03-components.md

* Update tutorial/04-state.md

* Update tutorial/05-refs.md

* Update tutorial/07-side-effects.md

* Update tutorial/08-keys.md

Author: dragomano

content/ru/blog/introducing-signals.md

@@ -60,7 +60,7 @@ render(<Counter />, document.getElementById('app'));
 
 ## Контекстный хаос
 
-Другой распространённый обходной путь, к которому прибегают команды при разделении состояний, заключается в том, чтобы поместить состояние в контекст. Это позволяет сократить время рендеринга, потенциально пропуская рендеринг для компонентов между поставщиком контекста и потребителями. Однако здесь есть одна загвоздка: может быть обновлено только значение, переданное поставщику контекста, и только в целом. Обновление свойства объекта, выставляемого через контекст, не приводит к обновлению потребителей этого контекста — гранулярное обновление невозможно. Возможные варианты решения этой проблемы — разделение состояния на несколько контекстов или аннулирование объекта контекста путем его клонирования при изменении любого из его свойств.
+Другой распространённый обходной путь, к которому прибегают команды при разделении состояний, заключается в том, чтобы поместить состояние в контекст. Это позволяет сократить время рендеринга, потенциально пропуская рендеринг для компонентов между поставщиком контекста и потребителями. Однако здесь есть одна загвоздка: может быть обновлено только значение, переданное поставщику контекста, и только в целом. Обновление свойства объекта, выставляемого через контекст, не приводит к обновлению потребителей этого контекста — гранулярное обновление невозможно. Возможные варианты решения этой проблемы — разделение состояния на несколько контекстов или аннулирование объекта контекста путём его клонирования при изменении любого из его свойств.
 
 ![Контекст может пропускать обновление компонентов до тех пор, пока из него не будет считано значение. Затем снова приступают к мемоизации.](/signals/context-chaos.png)
 

content/ru/blog/preact-x.md

@@ -54,7 +54,7 @@ const App = () => {
 
 ### 10.8.0
 
-В 10.8.0 мы ввели [регулировку состояния](https://github.com/preactjs/preact/pull/3553), которая гарантирует, что если компонент обновляет состояние хука во время рендеринга, мы подхватим это, отменим предыдущие эффекты и продолжим рендеринг. Нам, конечно, придется следить за тем, чтобы это не зацикливалось, но эта функция уменьшает количество рендеров, которые стоят в очереди из-за обращений к состоянию рендера. Эта функция также повышает нашу совместимость с экосистемой React, поскольку многие библиотеки полагаются на то, что эффекты не будут вызываться несколько раз из-за обновлений состояния рендера.
+В 10.8.0 мы ввели [регулировку состояния](https://github.com/preactjs/preact/pull/3553), которая гарантирует, что если компонент обновляет состояние хука во время рендеринга, мы подхватим это, отменим предыдущие эффекты и продолжим рендеринг. Нам, конечно, придется следить за тем, чтобы это не зацикливалось, но эта функция уменьшает количество перерисовок, которые стоят в очереди из-за обращений к состоянию рендера. Эта функция также повышает нашу совместимость с экосистемой React, поскольку многие библиотеки полагаются на то, что эффекты не будут вызываться несколько раз из-за обновлений состояния рендера.
 
 ### 10.11.0
 
@@ -89,7 +89,7 @@ const App = () => {
   return toggled ? (
     <div onClick={() => setToggled(false)}>
       <span>clear</span>
-    </div> 
+    </div>
   ) : (
     <div>
       <button

content/ru/guide/v10/differences-to-react.md

@@ -103,7 +103,7 @@ Preact стремится максимально соответствовать
 <div className="foo" />
 ```
 
-Большинство разработчиков Preact предпочитают использовать `class`, поскольку он короче в написании, но поддерживаются оба варианта.
+Большинство разработчиков Preact предпочитают использовать `class` вместо `className`, так как он короче в написании, но поддерживаются оба варианта.
 
 ### SVG внутри JSX
 
@@ -168,7 +168,7 @@ React.createElement('a', { href: '/' }, React.createElement('span', null, 'Гл
 
 ## Возможности, эксклюзивные для `preact/compat`
 
-`preact/compat` — это наш **уровень** совместимости, который преобразует код React в Preact. Для существующих пользователей React это может быть простой способ опробовать Preact, не меняя никакого кода, путем [установки нескольких псевдонимов](/guide/v10/getting-started#aliasing-react-to-preact) в конфигурации вашего сборщика.
+`preact/compat` — это наш **уровень** совместимости, который преобразует код React в Preact. Для существующих пользователей React это может быть простой способ опробовать Preact, не меняя никакого кода, путём [установки нескольких псевдонимов](/guide/v10/getting-started#aliasing-react-to-preact) в конфигурации вашего сборщика.
 
 ### Children API
 

content/ru/guide/v10/hooks.md

@@ -147,7 +147,7 @@ function useCounter() {
 ```
 
 Передача `value` здесь заставляет `useCallback` возвращать новую ссылку на функцию при каждом изменении `value`.
-Это необходимо для того, чтобы избежать «устаревших закрытий», когда обратный вызов всегда будет ссылаться на переменную `value` первого рендера с момента его создания, в результате чего `increment` всегда будет устанавливать значение `1`.
+Это необходимо для того, чтобы избежать «устаревших закрытий», когда обратный вызов всегда будет ссылаться на переменную `value` первой отрисовки с момента его создания, в результате чего `increment` всегда будет устанавливать значение `1`.
 
 > Это создает новый обратный вызов `increment` каждый раз, когда изменяется `value`.
 > Из соображений производительности часто лучше использовать [обратный вызов](#usestate) для обновления значений состояния, а не сохранять текущее значение с помощью зависимостей.
@@ -262,9 +262,13 @@ const onClick = useCallback(() => console.log(a, b), [a, b]);
 
 > Интересный факт: `useCallback(fn, deps)` эквивалентно `useMemo(() => fn, deps)`.
 
+## Рефы
+
+**Рефы** — это стабильные, локальные значения, которые сохраняются между перерисовками, но не вызывают их сами по себе. См. [Рефы](/guide/v10/refs) для получения дополнительной информации и примеров.
+
 ## useRef
 
-Для получения стабильной ссылки на узел DOM или значение, которое сохраняется между рендерами, мы можем использовать хук `useRef`. Он работает аналогично [createRef](/guide/v10/refs#создание-рефа).
+Для получения стабильной ссылки на узел DOM или значение, которое сохраняется между перерисовками, мы можем использовать хук `useRef`. Он работает аналогично [createRef](/guide/v10/refs#создание-рефа).
 
 ```jsx
 // --repl
@@ -291,9 +295,54 @@ render(<Foo />, document.getElementById('app'));
 
 > См. [Рефы](/guide/v10/refs) для получения дополнительной информации и примеров.
 
+### useImperativeHandle
+
+Чтобы изменить реф, переданный в дочерний компонент, мы можем использовать хук `useImperativeHandle`. Он принимает три аргумента: реф для изменения, функцию, которая будет выполнена и вернет новое значение рефа, и массив зависимостей, для определения необходимости повторного выполнения.
+
+```jsx
+// --repl
+import { render } from "preact";
+import { useRef, useImperativeHandle, useState } from "preact/hooks";
+// --repl-before
+function MyInput({ inputRef }) {
+  const ref = useRef(null);
+  useImperativeHandle(inputRef, () => {
+    return {
+      // Раскрываем только метод `.focus()`, не предоставляя прямого доступа к узлу DOM
+      focus() {
+        ref.current.focus();
+      },
+    };
+  }, []);
+
+  return (
+    <label>
+      Name: <input ref={ref} />
+    </label>
+  );
+}
+
+function App() {
+  const inputRef = useRef(null);
+
+  const handleClick = () => {
+    inputRef.current.focus();
+  };
+
+  return (
+    <div>
+      <MyInput inputRef={inputRef} />
+      <button onClick={handleClick}>Нажмите для редактирования</button>
+    </div>
+  );
+}
+// --repl-after
+render(<App />, document.getElementById("app"));
+```
+
 ## useContext
 
-Для доступа к контексту в функциональном компоненте мы можем использовать хук `useContext`, без каких-либо вышестоящих компонентов или компонентов-оберток. Первым аргументом должен быть объект контекста, созданный в результате вызова `createContext`.
+Для доступа к контексту в функциональном компоненте мы можем использовать хук `useContext`, без каких-либо вышестоящих компонентов или компонентов-обёрток. Первым аргументом должен быть объект контекста, созданный в результате вызова `createContext`.
 
 ```jsx
 // --repl

content/ru/guide/v10/refs.md

@@ -1,11 +1,11 @@
 ---
 name: Рефы
-description: 'Рефы — это способ создания стабильных значений, которые локальны для экземпляра компонента и сохраняются между рендерами.'
+description: 'Рефы — это способ создания стабильных значений, которые локальны для экземпляра компонента и сохраняются между перерисовками.'
 ---
 
 # Рефы
 
-Ссылки на DOM-элементы, или рефы, — это стабильные локальные значения, которые сохраняются между рендерами компонента, но не вызывают повторные рендеры, как это делают состояние или пропсы при их изменении.
+Ссылки на DOM-элементы, или рефы, — это стабильные локальные значения, которые сохраняются между перерисовками компонента, но не вызывают повторные перерисовки, как это делают состояние или пропсы при их изменении.
 
 Чаще всего рефы используются для императивного управления DOM, но их можно использовать для хранения любых произвольных локальных значений, которые необходимо сохранить стабильными. Вы можете использовать их для отслеживания предыдущего значения состояния, хранения ссылки на идентификатор интервала или таймаута, или просто для хранения значения счётчика. Важно отметить, что рефы не должны использоваться для логики рендеринга; вместо этого их следует использовать только в методах жизненного цикла и обработчиках событий.
 

content/ru/guide/v10/signals.md

@@ -63,7 +63,7 @@ function Counter() {
   const value = count.value;
 
   const increment = () => {
-    // Сигнал обновляется путем присвоения значения свойству `.value`:
+    // Сигнал обновляется путём присвоения значения свойству `.value`:
     count.value++;
   };
 

content/ru/guide/v10/switching-to-preact.md

@@ -22,7 +22,7 @@ description: 'Всё, что нужно знать для перехода с Re
 
 ## PureComponent
 
-Класс `PureComponent` работает аналогично `Component`. Разница в том, что `PureComponent` пропустит рендеринг, когда новые параметры будут равны старым. Для этого мы сравниваем старые и новые параметры посредством поверхностного сравнения, где мы проверяем каждое свойство параметра на ссылочное равенство. Это может значительно ускорить работу приложений, избегая ненужных повторных рендерингов. Это работает путем добавления хука жизненного цикла `shouldComponentUpdate` по умолчанию.
+Класс `PureComponent` работает аналогично `Component`. Разница в том, что `PureComponent` пропустит рендеринг, когда новые параметры будут равны старым. Для этого мы сравниваем старые и новые параметры посредством поверхностного сравнения, где мы проверяем каждое свойство параметра на ссылочное равенство. Это может значительно ускорить работу приложений, избегая ненужных повторных рендерингов. Это работает путём добавления хука жизненного цикла `shouldComponentUpdate` по умолчанию.
 
 ```jsx
 import { render } from 'preact';

content/ru/guide/v10/typescript.md

@@ -226,34 +226,33 @@ const Input = (props: InputProperties) => <input {...props} />
 Preact генерирует регулярные события DOM. Пока ваш проект TypeScript включает библиотеку `dom` (установите её в `tsconfig.json`), у вас есть доступ ко всем типам событий, которые доступны в вашей текущей конфигурации.
 
 ```tsx
+import type { JSX } from "preact";
+
 export class Button extends Component {
-  handleClick(event: MouseEvent) {
-    event.preventDefault();
-    if (event.target instanceof HTMLElement) {
-      alert(event.target.tagName); // Оповещение BUTTON
-    }
+  handleClick(event: JSX.TargetedMouseEvent<HTMLButtonElement>) {
+    alert(event.currentTarget.tagName); // Оповещение BUTTON
   }
 
   render() {
-    return <button onClick={this.handleClick}>{this.props.children}</button>;
+    return (
+      <button onClick={this.handleClick}>
+        {this.props.children}
+      </button>
+    );
   }
 }
 ```
 
-Вы можете ограничить обработчики событий, добавив аннотацию типа `this` к сигнатуре функции в качестве первого аргумента. Этот аргумент будет стерт после транспиляции.
+Если вы предпочитаете встроенные функции, можно обойтись без явного указания текущей цели события, так как она выводится из элемента JSX.
 
 ```tsx
 export class Button extends Component {
-  // Добавление этого аргумента ограничивает привязку
-  handleClick(this: HTMLButtonElement, event: MouseEvent) {
-    event.preventDefault();
-    if (event.target instanceof HTMLElement) {
-      console.log(event.target.localName); // "button"
-    }
-  }
-
   render() {
-    return <button onClick={this.handleClick}>{this.props.children}</button>;
+    return (
+      <button onClick={(event) => alert(event.currentTarget.tagName)}>
+        {this.props.children}
+      </button>
+    );
   }
 }
 ```