React : ??? ??? ?????? ???? ?? ?? ??

React? ??? ??? ?????? ?????? ???? JavaScript ??? ?? ????????. ?? ??? ??? ????, ?? ??? ?? ??? ??? ?? ? ?????.

???? ? ??? ??? ?? ??? ?? ??? ?? ? ???? React? ?????. ?? ??? ?? ?? ??? React ?? ??? ? ?? ? ? ????.

?? ??

? ????? ?? ??? ??? ???? ?? ??? ? ? ?????? ?????? ????. ??? ?? ?? ???? ??? ?? ?? ?? ??? ???? ???? ???? ????? ??? ? ????. ??? ?? ?? ? ?? ?? ??, ?? ? ??? ?? ??, ???? ?? ?? ? ??? ??? ?? ??? ?? ??? ?? ?? ??? ????.

?????!

?? ??? ??????

?? ??? UI? ??? ???? ??? ? ??? ? ???? ??????. ?? ????? UI? ?? ?? ??, ?? ? API? ???? ?? ?? ??? ?? ? ? ????.

?? ?? Facebook? ? ?? ????? ?? ?? ??? ?? ?? ??? ????. ????? Facebook?? 30,000 ?? ?? ??? ???? ??? ??? ???? ????. ?? ?? ????? ???? ? ?? ??? ?? ????? ??? ? ????. ? ?? ??? ?? ?? ??? ?? ??? ???? ???? ?? ?? ?? ?? ?? ???? ? ? ????.

Facebook? UI? ?? ?? ?? ?? ?? ??? ?? ?? ??????. Facebook? ?? ??? ?? ?? ?? (?? ?? ?? ?? ??? ???? ?? ??)? ?? ? ? ????. ?? ?? ??? ?? ??? ? Ajax ???? ?? ?? ?? ????.

?? ??? ??? ? ? ????. ?? ???? ??? ?? ??? ?????? ?? ???? ????. JSX Syntax? ???? ??? ??? ?? ??? ?? ? ? ????.

<code><div>
<br>    ?? ? : {count}<br><hr>
<br>    {/* ?? ?? ???? ?*/}<br>            updateCount = {setCount (count 1)}/><br>            updateCount = {setCount (count-1)}/><br>
</div>
<br></code>

??? ??

?? ???? ???? ???????. ?? ?? ?? ? ?? ??? ???? ? ?? ???? ?? ? ? ????. ??? ?? ?? ??? ????? ???? ??? ?????. ???? ?????.

??? ?????

?? ??? ???? JavaScript ?? ? ?? ??? ?? ?????. ? ??? ???, ?? ??? ??? ??? (????? ?), ??? ?? ? ?? ?? JSX ??? ??????.

??? ???? ?? ??? ??? ? ? ??? React? ??? ??? ????? ????????? ????. ?? ?? ?? ??? ??? ???? ?? ?? ??? ???? ??? ? ??? ?? ?? ??? ??? ??? ? ??? ?????. ??? ??? ?? ??? ??????? "?? ??? ?? ?? ? ? ??"??? ?????. useState() ??? ??? ?? ?????.

 <code>const [count,setCount] = useState(0);<br></code>

?? ?? setCount() ???? ?? ???? ?? ? ????.

??? ?? ??

??? ?? ??? ?? ?? ???? ? ?? ? ? ??? ?? ????? ???? ?????.

?? ????? ?? ? ???? ???? ?? super() ???? ??? ?? ??? ?? ? ????.

?? ??? ?? ? ? ???? ?? ?????. ?? ??, ?? ??? ??? ??? ???? ??? ??? ???? ?? ? ????. ??.

?? ??? ?? ??? ?? ??? ???? ???? ?? ????.

?? ???? ???? ?? super() ? ???????. ??? ??? "????? Super () Call Missing"??? ?????.

??? ??? ?? ?? this.setState() ???? ??? ?????? ?? count ? count ??? ???? ????. useState() ??? ? ??? ??? ???? ? ??? ? ?? ??? ?????.

 <code>// 這有效<br><br>// 鉤子<br>const [count,setCount] = useState(0);<br> setCount(count value);<br><br> // 類(lèi)組件<br>handleCount(value) {<br>    this.setState({count: this.state.count value});<br> }<br></code>

?? ?? setCount() ??? ???? ?????. ?? count ? ?? ?? 1 ? ???? ???? ?????. ??? ??? ????. ???? 100?? ???? ??? ?? setState() ? ??? 1? ???? ? ?? ??? ?? ? 100? ??????. setState() ? ?????? ?? prevState ?? ??? ?? ???? ?? ??? ?????. React.memo ??? ?????. ? ?? ?? ??? ??? ?? ? ?? ?? ??? ? ????. ??? ??? ??? ?? ? ? ??? ??? ???? ?? ??? ??? ?? ???????. ??? ?? ??? ??? ?? ??? ??? ????. ??? ???? ??? ? ??? ?? ?? ?????.

 <code>const HelloWorld = ({name}) => (<br></code> {`hi $ {name}`}<br> );<br>

?? ??? ??? ?? PureComponent ? ??? ? ? ????. ??? ??? React ?? ??? ???? ??? ?????. ????? ?? ?? ??? ?? ?? ??? ?? ? ? ?? ???????. ??? memo ???? ?? React? ?? ? ??? ?? ?? ??? ????? ??? ?? ?/? ?? ?? ??? ???? ?? ??? ?? ??? ?????. ??? ?? ?? ? ????, ?? ?? ? ??? ?? ? ?? ???? ???? ?? ? ????.

 <code>// 類(lèi)組件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 鉤子<br>const MyComponent = React.memo(function MyComponent(props) { // 將組件函數(shù)包裝在React.memo 中<br> // ...<br> });<br></code>

React.memo ? ??? ????? ? ???? ?? ??? ??? ??? ???? ? ??? ????.

??? ??

?? ?? ??? ??? ????? ??? ?? ???? ?? ????? ?? ???? ??? ?? ?? ??? ??? ?????.

? ?????? ??? ?? ?? ?? ???? ? ??? ?? ?? ??? ?? ?? ??? ??? ????.

? ??? ???????? Jacob Jackson? ???? ???? ????. Jacob? ? ???, ?? ??, ???? ? ?? ?? ??????.

? ??? React? ??? ??? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!