Qiitaのニューデザイン良いですね
誰に言ってるんだろう笑
I wish I knew these before diving into React
I found these things fundamental yet important for react developers.
ってことで、ポイントだけ訳すます。
コードサンプルとか、画像は上リンクの本記事でご覧くださいまし
1. By default, setState triggers a re-render
setStateを呼ぶ度(stateに変更がある度)に、再描画が走るので、何かしらの理由で再描画が不要な場合には、shouldComponentUpdateというライフサイクルメソッドでfalseを返しましょう！
The default behavior of React is to re-render on every state change, and most of the time it is okay to rely on this. However, re-rendering unnecessarily wastes cycles which is not a good practice.
Each component has a method called shouldComponentUpdate and it is called everytime you change state or pass new props from the parent component. React decides whether to re-render or not according to the return value of shouldComponentUpdate.
By default, shouldComponentUpdate returns true, but you can override it to return false for cases that you do not want a re-render. Here is an example:
注記
shouldComponentUpdateは間違えて実装すると、思わぬ挙動になるし、実装する手間とかもあるから、よく考えてから実装した方が良いよ
React’s Performance Tools を使って無駄にしてる再描画をチェックすると良いよ
Important notes:
Setting shouldComponentUpdate wrongly or forgetting that you set it can cause major problems since your component may not be updated as expected.
Running computations in shouldComponentUpdate can be expensive in terms of performance and effort, so you should make sure it is worth it. I strongly recommend you to use React’s Performance Tools to check the number of wasted cycles before and after using shouldComponentUpdate.
2. setState updates the local state asynchronously
setStateは非同期的にstateを更新するので、必ずしも複数処理を走らせたからといって、その全てが同期的に適用されるとは限らないよ。
もし同期的にカウンターをインクリメントなんかしたい場合には、公式ドキュメントに書いてあるような setStateメソッドに、更新前のstateを渡す必要があったり。
詳しくは公式ドキュメントを読んでね。
It is not guaranteed that the state changes are applied instantly after a setState call.
A common mistake is to read this.state right after calling setState . In general, it is not reliable to use this.state inside the setState method.
If you need to update the state based on the previous state, best practice is using the updater function which is the first argument of setState(updater, [callback]).
Bonus: What is the second argument, callback ?
It is an optional callback function, executed after setState is completed and the component is re-rendered. However, componentDidUpdate is recommended for such logic instead of callback in the official docs.
For more detailed information I recommend you to check this part of the official document.
3. Component Lifecycle is Important!
ライフサイクルはやっぱり理解しておきたい！
The first step to have a happy life with React components is to understand the component life cycle. Each React component has methods that you can use to run your code at particular times in component’s lifecycle. In order to use them correctly, you should grasp the call order of lifecycle methods. We can simply divide lifecycle into three parts:
Mount系： コンポーネントが生成されてDOMに挿入される時
Mounting: an instance of the component is being created and inserted into the DOM.
Update系： stateとかpropsに更新があって、再描画される時
Updating: component is being re-rendered, can be caused by changes of props or state.
Unmount系：コンポーネントがDOMから削除されて、非表示になる時
Unmounting: component is being removed from the DOM.
個人的に、この記事の画像がとてもわかりやすかった。
もちろん公式ドキュメントでも要チェック
It is very important to understand how these methods work. This post is great for understanding lifecycle methods and their usage. I also strongly recommend you to check this part of the official documents.
4. Use componentWillReceiveProps
親コンポーネントから渡ってくるpropsの更新に応じて、stateを更新したい時には、componentWillReceiveProps をつかいましょう！
更新前のpropsと更新後のpropsが引数として渡されるので、componentWillReceivePropsのなかで、それらを比較してsetStateしたり。
ちなみにコンポーネントの初期レンダリングの際には、比較するpropsがないので呼ばれません。
If you want to update the state in response to props changes, this is the method you need. Compare this.props with nextProps and if there is a significant change, act on it.
React may call componentWillReceiveProps even if the props have not changed, so comparing this.props and nextProps is important.
componentWillReceiveProps is invoked before a mounted component receives new props, this means React doesn’t call componentWillReceiveProps with initial props during mounting.
5. Use React Developer Tools
React Developer Tools と Create React App 使ってこ
React Developer Tools lets you inspect the React component hierarchy, components’ props and state. It is very useful in many cases because React is all about components. It exists both as a browser extension (for Chrome and Firefox), and as a standalone app.
6. Use Create React App
Facebook’s Create React App lets you create React apps with no build configuration. It is very simple to use and has a great Github readme. You only need to have Node >= 6 and it works on macOS, Windows, and Linux.
ミス等あればコメントください🙏