You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
***During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags.
138
-
***During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image.
`useState` 的唯一参数是 state 变量的**初始值**。在这个例子中,`index` 的初始值被`useState(0)`设置为 `0`。
370
-
=======
371
-
The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`.
372
-
>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
368
+
`useState` 的唯一参数是 state 变量的 **初始值**。在这个例子中,`index` 的初始值被 `useState(0)` 设置为 `0`。
373
369
374
370
每次你的组件渲染时,`useState` 都会给你一个包含两个值的数组:
375
371
@@ -1455,11 +1451,7 @@ export default function FeedbackForm() {
If your linter is [configured for React](/learn/editor-setup#linting), you should see a lint error when you make a mistake like this. If you don't see an error when you try the faulty code locally, you need to set up linting for your project.
***Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), that is, a component should ideally only be concerned with one thing. If it ends up growing, it should be decomposed into smaller subcomponents.
51
-
***CSS**--consider what you would make class selectors for. (However, components are a bit less granular.)
52
-
***Design**--consider how you would organize the design's layers.
1. The original list of products is **passed in as props, so it's not state.**
249
-
2. The search text seems to be state since it changes over time and can't be computed from anything.
250
-
3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything.
251
-
4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox.
252
-
>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
253
240
254
241
这就意味着只有搜索文本和复选框的值是 state!非常好!
255
242
@@ -283,23 +270,13 @@ props 和 state 是不同的,但它们可以共同工作。父组件将经常
Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component:
1109
-
>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
1110
1098
1111
1099
```js {7}
1112
1100
exportdefaultfunctionBoard() {
@@ -2085,22 +2073,13 @@ export default function Game() {
2085
2073
}
2086
2074
```
2087
2075
2088
-
<<<<<<< HEAD
2089
2076
你可以在下面看到你的代码应该是什么样子。请注意,你应该会在开发者工具控制台中看到一条错误消息:
2090
-
=======
2091
-
You can see what your code should look like below. Note that you should see an error in the developer tools console that says:
2092
-
>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
2093
2077
2094
2078
<ConsoleBlock level="warning">
2095
2079
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.
Note that the `...` spread syntax is "shallow"--it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you'll have to use it more than once.
0 commit comments