From 9676676bb204b404703c1fece4dbbfeb9f563526 Mon Sep 17 00:00:00 2001 From: JuyeongByeon Date: Fri, 7 Jan 2022 15:25:02 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20"=E2=80=A6"=20spread=20syntax=20is=20not?= =?UTF-8?q?=20an=20"operator"=20but=20document=20saying=20that=20is=20an?= =?UTF-8?q?=20"operator"=20so=20it=20can=20make=20developers=20confused?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- beta/src/pages/blog/2014/10/28/react-v0.12.md | 2 +- beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md | 2 +- beta/src/pages/blog/2015/03/10/react-v0.13.md | 2 +- beta/src/pages/learn/updating-arrays-in-state.md | 8 ++++---- beta/src/pages/learn/updating-objects-in-state.md | 2 +- content/blog/2014-10-28-react-v0.12.md | 2 +- content/blog/2015-02-24-react-v0.13-rc1.md | 2 +- content/blog/2015-03-10-react-v0.13.md | 2 +- content/docs/jsx-in-depth.md | 4 ++-- content/warnings/unknown-prop.md | 2 +- 10 files changed, 14 insertions(+), 14 deletions(-) diff --git a/beta/src/pages/blog/2014/10/28/react-v0.12.md b/beta/src/pages/blog/2014/10/28/react-v0.12.md index 930c3db9245..f92a84ec00d 100644 --- a/beta/src/pages/blog/2014/10/28/react-v0.12.md +++ b/beta/src/pages/blog/2014/10/28/react-v0.12.md @@ -65,7 +65,7 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl #### New Features {/*new-features*/} -- Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo` +- Spread syntax (`{...}`) introduced to deprecate `this.transferPropsTo` - Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest` #### Deprecations {/*deprecations*/} diff --git a/beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md b/beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md index ed9755f9f36..3ed10f5e393 100644 --- a/beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md +++ b/beta/src/pages/blog/2015/02/24/react-v0.13-rc1.md @@ -66,7 +66,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa - `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target. - `es5` is the default. - `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility). -- The transform for the call spread operator has also been enabled. +- The transform for the call spread syntax has also been enabled. ### JSX {/*jsx*/} diff --git a/beta/src/pages/blog/2015/03/10/react-v0.13.md b/beta/src/pages/blog/2015/03/10/react-v0.13.md index 7e7afa735a0..22ef047f073 100644 --- a/beta/src/pages/blog/2015/03/10/react-v0.13.md +++ b/beta/src/pages/blog/2015/03/10/react-v0.13.md @@ -79,7 +79,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages - `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target. - `es5` is the default. - `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility). -- The transform for the call spread operator has also been enabled. +- The transform for the call spread syntax has also been enabled. ### JSX {/*jsx*/} diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md index 63c2a965ae0..172d63600a0 100644 --- a/beta/src/pages/learn/updating-arrays-in-state.md +++ b/beta/src/pages/learn/updating-arrays-in-state.md @@ -143,7 +143,7 @@ button { margin-left: 5px; } -The array spread operator also lets you prepend an item by placing it *before* the original `...artists`: +The array spread syntax also lets you prepend an item by placing it *before* the original `...artists`: ```js setArtists([ @@ -334,7 +334,7 @@ button { margin: 5px; } ### Inserting into an array {/*inserting-into-an-array*/} -Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread operator together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array. +Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread syntax together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array. In this example, the Insert button always inserts at the index `1`: @@ -398,7 +398,7 @@ button { margin-left: 5px; } ### Making other changes to an array {/*making-other-changes-to-an-array*/} -There are some things you can't do with the spread operator and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly. +There are some things you can't do with the spread syntax and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly. **However, you can copy the array first, and then make changes to it.** @@ -442,7 +442,7 @@ export default function List() { -Here, you use the `[...list]` spread operator to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`. +Here, you use the `[...list]` spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`. However, **even if you copy an array, you can't mutate existing items _inside_ of it directly**. This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem. diff --git a/beta/src/pages/learn/updating-objects-in-state.md b/beta/src/pages/learn/updating-objects-in-state.md index 15d0ebfe594..d5bdcb63476 100644 --- a/beta/src/pages/learn/updating-objects-in-state.md +++ b/beta/src/pages/learn/updating-objects-in-state.md @@ -1123,7 +1123,7 @@ select { margin-bottom: 10px; } The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.) -The fix is to remove the mutation from `handleMove`, and use the spread operator to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation. +The fix is to remove the mutation from `handleMove`, and use the spread syntax to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation. diff --git a/content/blog/2014-10-28-react-v0.12.md b/content/blog/2014-10-28-react-v0.12.md index eb49f83d6a0..661e6995ab3 100644 --- a/content/blog/2014-10-28-react-v0.12.md +++ b/content/blog/2014-10-28-react-v0.12.md @@ -66,7 +66,7 @@ You can read the full text of the [LICENSE](https://github.com/facebook/react/bl #### New Features {#new-features} -* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo` +* Spread syntax (`{...}`) introduced to deprecate `this.transferPropsTo` * Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest` #### Deprecations {#deprecations} diff --git a/content/blog/2015-02-24-react-v0.13-rc1.md b/content/blog/2015-02-24-react-v0.13-rc1.md index 6bf6e84f5c8..ac2dd4c5cd4 100644 --- a/content/blog/2015-02-24-react-v0.13-rc1.md +++ b/content/blog/2015-02-24-react-v0.13-rc1.md @@ -69,7 +69,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa * `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target. * `es5` is the default. * `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility). -* The transform for the call spread operator has also been enabled. +* The transform for the call spread syntax has also been enabled. ### JSX {#jsx} diff --git a/content/blog/2015-03-10-react-v0.13.md b/content/blog/2015-03-10-react-v0.13.md index 47a450d2e5b..df0064c3232 100644 --- a/content/blog/2015-03-10-react-v0.13.md +++ b/content/blog/2015-03-10-react-v0.13.md @@ -81,7 +81,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages * `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target. * `es5` is the default. * `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility). -* The transform for the call spread operator has also been enabled. +* The transform for the call spread syntax has also been enabled. ### JSX {#jsx} diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md index c46a66246f7..04a3858c149 100644 --- a/content/docs/jsx-in-depth.md +++ b/content/docs/jsx-in-depth.md @@ -231,7 +231,7 @@ In general, we don't recommend *not* passing a value for a prop, because it can ### Spread Attributes {#spread-attributes} -If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent: +If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" syntax to pass the whole props object. These two components are equivalent: ```js{7} function App1() { @@ -244,7 +244,7 @@ function App2() { } ``` -You can also pick specific props that your component will consume while passing all other props using the spread operator. +You can also pick specific props that your component will consume while passing all other props using the spread syntax. ```js{2} const Button = props => { diff --git a/content/warnings/unknown-prop.md b/content/warnings/unknown-prop.md index 783d1b38559..5b36059c837 100644 --- a/content/warnings/unknown-prop.md +++ b/content/warnings/unknown-prop.md @@ -33,7 +33,7 @@ function MyDiv(props) { } ``` -**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable. +**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable. ```js function MyDiv(props) {