Web_programming

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

https://lnfnunes.github.io/404-PageNotFound/ https://freefrontend.com/html-css-404-page-templates/

شرکت همراه مکانیک به دنبال cto است اگر متقاضی هستید و یا فردی را می شناسید لطفا معرفی کنید. https://www.hamrah-mechanic.com استک تکنولوژی آنها مایکروسافتی است

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

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

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

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

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

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

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

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

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

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

اگر دستور

npm run start

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

محتوای فایل را پاک کرده و برنامه زیر را جایگزین کنید ``` 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; ‍‍‍‍```

فایل app.js را می خواهیم تغببر دهیم

در ادامه با یک مثال ساده این کار را با هم مرور می کنیم: ابتدا یک پروژه react ایجاد کنید (به کمک دستورات زیر) npx create-react-app my-app cd my-app npm start

https://dmitripavlutin.com/use-react-memo-wisely/ مقاله خوبی است که کاربرد React.memo را برای افزایش سرعت renderکردن با یک مثال ساده توضیح داده است.