محتوای فایل را پاک کرده و برنامه زیر را جایگزین کنید
```
import React, { Component } from "react";
import ReactDOM from "react-dom";

const ScotchyComponent = props => <div>{props.message}</div>;

// create a version that only renders on prop changes
const MemoizedScotchyComponent = React.memo(ScotchyComponent);

// counter component
// we need a second moving component to trigger a render on our app
const Counter = props => <strong>{props.count}</strong>;

/
* Main App component
*/
class App extends Component {
state = { count: 0, value: "my message goes here" };

handleChange = e => this.setState({ value: e.target.value });
handleClick = () => this.setState(({ count }) => ({ count: count + 1 }));

render() {
const { count, value } = this.state;

return (
<div className="hero is-fullheight has-text-centered">
<div className="hero-body">
<div className="container">
<h1 className="title">
React.memo(): <Counter count={count} />
</h1>

<button
type="button"
className="button is-warning"
onClick={this.handleClick}
>
Increase Count
</button>

{/* two columns to show components */}
<input
type="text"
className="input"
value={value}
onChange={this.handleChange}
style={{ marginTop: "30px", marginBottom: "30px" }}
/>

{/* two columns to show components */}
<div className="columns is-mobile">
<div className="column">
<ScotchyComponent message={value} />
</div>
<div className="column">
<MemoizedScotchyComponent message={value} />
</div>
</div>
</div>
</div>
</div>
);
}
}


export default App;
‍‍‍‍```

اگر دستور

npm run start

را بزنید خواهیم داشت:

دو پیغام آخر در تصویر بالا از مولفه های بالا ساخته شده اند

همانطور که می بینید دومی memo شده است

خوب تاثیر این ان است که وقتی بر روی دکمه کلیک می کنیم این کامپوننت memo شده render نمی شود (بهبود performance)

در بخش inspect وارد profiler شوید

بر روی reload and start profiler کلیک کنید و سپس stop کنید

در گوشه یک تعداد frameهای commit شده در react می بینید
کنار ۱/۱ با مربع و یا مستطیل نمایش داده می شوند

همانطور که در تصویر مشخص است همه مولفه ها render شده اند (دارای زمان هستند)

حالا یک بار دیگر profiler را راه اندازی می کنیم و بر روی دکنه increase کلیک می کنیم و نتیجه را مقایسه می کنیم

همانطور که در تصویر می بینید مولفه memo شده در شرایطی که ورودی های آن تعییر نکرده است render نمی شوند ( با هاشور سفید رنگ نشان داده شده است)

چرا فقط مولفه غیر memo در این سناریو render شد؟
زیرا پدر مولفه با کلیک تغییر می کند و نیاز به render دارد. مولفه های که به صورت memo است از انجا که مقادیر آن تغییر نکرده است render نمی شود

شرکت همراه مکانیک به دنبال cto است اگر متقاضی هستید و یا فردی را می شناسید لطفا معرفی کنید.

https://www.hamrah-mechanic.com

استک تکنولوژی آنها مایکروسافتی است

perlin noise

https://en.wikipedia.org/wiki/Perlin_noise
https://flafla2.github.io/2014/08/09/perlinnoise.html
https://github.com/wangyasai/PerlinNoisePainter
https://en.wikipedia.org/wiki/Simplex_noise
https://josephg.com/perlin/3/
https://29a.ch/film-emulator/
https://github.com/crnacura/AmbientCanvasBackgrounds

به نظر شما دستور مشخص شده در بالا چه معنی دارد؟
نظرتان را برای من ارسال کنید تا درباره آن گفتگو کنیم :)

اگر یک برنامه ساده با create reat app بنویسید همانطور که در تصویر می بینید در اندروید با api ۱۶ یعنی اندروید ۴.۰۱ سایت شما load نمیشود.

راه حل این است که در فایل index.html در پوشه public خط زیر را اضافه کنید و یا معادل کد را خودتان در برنامه بنویسید

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

البته روش زیر بهتر است
https://reactjs.org/docs/javascript-environment-requirements.html