Reactノート1:簡単なシリアル
2814 ワード
Reactノート1:簡単なシリアル
githubソースコードはここにあります.星を覚えています.https://github.com/brandonxiang/example-react
紹介する
Reactは非常に詰め込まれたフロントエンドツールであり,学習コストも比較的高いといえる.es 6とwebpackとよく結合しているからです.だからreactを学ぶ前にbabelやwebpackなどを勉強し、reactを学んだ後にredux、react-routerを勉強し、周辺のコンポーネントもたくさんあります.
コンポーネントエコ
react,angular,vueの問題について多くの人が議論していることを知っています.
個人的にreactを選択した理由は、そのコンポーネント生態に違いないと思います.詳細はawesome-react-componentsを参照してください.それに比べて、angularの生態も悪くないが、angular 2の断裂式のアップグレードや、angular 1の汚れタイプの問題、angular 2の機能が完備している.これらは私にangularが好きではありません.vueは「シングルス独闘」の小さな種目に適している.
入門チュートリアル
React入門例チュートリアルでは
renderの考え方JSXの文法・コンポーネントの構成propsとstateなどを解説しています.データバインド
stateとprops、二つの独自の言い方.propsの多くは属性の単一バインドであり、サブコンポーネントのパラメータであってもよい.stateはステータスマシンで、双方向バインド、データインタラクションを実現できます.
例
簡単なReactのdemoを作成するには、多くの方法があります.ここでは、簡単な足場create-react-appについて説明します.
npm install -g create-react-app
create-react-app my-app
また、yoテンプレート構築ツールgenerator-react-webpackを採用しています.react,webpackおよびpostcssテンプレートの生成を一気に完了します.ユニットテストコードを生成しました
チェン一峰先生のコードサンプルライブラリ足場
二つの書き方
React NativeのES 6+とES 5構文の比較を参照
Es 5の書き方
この書き方は伝統的で、ちょっとes 5の意味があります.初期化使用方法
getInitialState.var Hello = React.createClass({
render() {
return Hello, world;
}
})
export default Hello
Es 6類の書き方
es 6の書き方で、斬新で親切です.初期化使用方法
constructor.export default class Hello extends Component{
render() {
return Hello, world;
}
}
両者の区別の詳細はReact.createClass versus extends React.Component.
PropType
ライフサイクル
個人的にはこれは難点だと思いますが、レンダーサイクルの方法で、domサイクルでのいくつかの機能を実現することができ、domのいくつかの機能を緊密に把握して実現することができ、jqueryのような感じがします.ライフサイクルの把握は、多くの論理的な機能を実現することができます.
forceUpdate()使用する場合