React学習ノート1

6565 ワード
javascript
私はscript srcで導入したreactの関連ファイルですが、今回の学習手順は『Reactクイック開発』の順に学習しました.
このブログのメモアドレス:http://note.youdao.com/noteshare?id=09c72e73de42ff99a65977eaf4db892e&sub=60C0A66521F9494DA5A784A2A6E9877E
一、script srcによる必要なjsファイルの導入
1.reactを導入する.jsとreactDom.js
2、ReactDomオブジェクトを使用します.このオブジェクトには、render()メソッドが最も有用ないくつかのメソッドが含まれています.
注意:React.DOMとReactDOMの違い:
  　　　　　　　　 React.DOM----あらかじめ定義されたHTML要素の集合
ReactDOM----ブラウザでアプリケーションをレンダリングする方法
ReactDOM.render( 
            React.DOM.h1(null,"Hello World"), 				    
             document.getElementById("app") 		
)

h 1()メソッドの最初のパラメータはオブジェクトを受信し、2番目のパラメータはコンポーネントを定義するサブ要素を受信する
二、特殊なDOM属性----class,for,style
class,forはJavaScriptのキーワードであり,代わりに属性名はclassNameとhtml Forである.
　　　　　　　　　　　　　　ReactDOM.render(
				React.DOM.h1({
					style:{
						color:'#fff',
						background:'red',
						height:'50px',
						lineHeight:'50px'
					},
					className:'appa',
					htmlFor:'me'
				},"Hello World"),
				document.getElementById("app")
			)

質問:なぜReactDOMにいるのか.renderでh 1ラベルと同級のDOM要素を再レンダリングできませんか?
　　　　
三、コンポーネントライフサイクル
1、基礎
①コンポーネントの作成方法
　　　　　　　　　　　　　　　　var component = React.createClass({
				render(){
					return React.DOM.div({
						style:{
							fontSize:'14px',
							fontFamily:'    ',
							lineHeight:'30px'
						},
						className:'my-component'
					},React.DOM.span(null,'         '))
				}
			})
			
			ReactDOM.render(
				React.createElement(component),
				document.getElementById('app')
			)

②コンポーネントの作成方法
               　　　　　　ReactDOM.render(
				React.createElement('span',{
					style:{
						color:'blue',
						fontSize:"16px",
						fontFamily:'    ',
						fontWeight:'bold',
					}
				},'this is my component'),
				document.getElementById('app')
			)

③コンポーネントの作成方法
var ComponentFactory = React.createFactory(component)
ReactDOM.render(
	ComponentFactory(),
	document.getElementById('app')
)

2、属性
すべてのプロパティはthisで使用できます.propsオブジェクトを取得します.this.propsは読み取り専用の属性と見なすことができ、この点では、Vueの親コンポーネントがサブコンポーネントに伝達する値と似ている.　 
　　　　　　　　　　　　　　var component = React.createClass(
				{
					render(){
						return React.DOM.p({
							style:{
								color:"#333",
								fontSize:'16px',
								lineHeight:'40px'
							},
						},"My name is"+this.props.name)
					}
				}
			)
			ReactDOM.render(
				React.createElement(component,{
					name:'Alice'
				}),
				document.getElementById('app')
			)

　　3、propTypes
コンポーネントにproptypesのプロパティを追加して、コンポーネントが受信する必要があるプロパティのリストと対応するタイプを宣言します.Vueコンポーネントのdataに似ていますが、dataにはあまり似ていません.
propsTypeを使用するメリット:
  • は、コンポーネントが受信することを望むパラメータを予め宣言することによって、コンポーネントを使用するユーザがrender()メソッドのソースコードの中でコンポーネントが構成可能な属性
    • をあちこち探す必要がないようにする.
  • Reactは、実行時に属性値の有効性を検証します.これにより、コンポーネントが受信するデータ型を考慮することなくrender関数を安心して作成できます.

    • 3、下図は出力Reactである.PropTypeの値
    　　　　　　　　 React学习笔记一_第1张图片
    　　　　 
    /*propTypes     */
			var component = React.createClass({
				propTypes:{
					name:React.PropTypes.string.isRequired,
					user:React.PropTypes.any.isRequired
				},
				render(){
					return React.DOM.div({},'my name is '+this.props.name+',I love '+this.props.user)
				}
			})
			
			ReactDOM.render(
				React.createElement(component,{
					name:123,
					user:'FangH'
				}),
				document.getElementById('app')
			)

    　　
    注意:
    ①コンポーネントに必要なパラメータが入力されていない場合は、次のようになります.
    ページレンダリングはundefinedを表示し、名前がコンストラクション関数に規定されていないことを意味するページに警告が表示されます.
    　　　　　　 React学习笔记一_第2张图片
     
    　　　　
    ②コンポーネントに必要な文字列タイプですが、コンストラクション関数に他のタイプが伝わる場合
    ページレンダリングでは、入力された値はレンダリングされますが、コンソールでは、入力されたタイプがコンストラクション関数で指定された文字列タイプではないことを意味する警告が表示されます.
    　　　　 React学习笔记一_第3张图片
    　　
    デフォルト属性値--getDefaultProps関数の使用
    ①いつ使用するか:伝達可能で伝達されない属性を定義する場合、コンポーネントがこれらの状況で正常に動作するように、特にいくつかの防御性テンプレートコードの生成(例えば、存在するかどうかの三元判断)に注意しなければならない.
    ②役割:getDefaultPropsこの関数はオブジェクトを返し、オプションの属性ごとにデフォルト値を提供します.
    　　　　　　 
    /*       */
			var component = React.createClass({
				propTypes:{
					name:React.PropTypes.string.isRequired,
					age:React.PropTypes.number,
					address:React.PropTypes.string
				},
				getDefaultProps(){
					return {
						age:0,
						address:'n/a'
					}
				},
				
				render(){
					return React.DOM.div({},'my name is '+this.props.name+',I am '+this.props.age+' years old,I live in '+this.props.address)
				}
			})
			
			ReactDOM.render(
				React.createElement(component,{
					name:'FangH',
					age:26,
//					address:
				}),
				document.getElementById('app')
			)

    　　4、state
    Reactの真の閃光点は、アプリケーションデータが変更されたとき(つまり、従来のブラウザDOMの操作とメンテナンスが複雑になった場所)に現れます.
    Reactにはstateとなる概念があり,すなわち自己構築レンダリング自身が使用するデータである.stateが変更されると、Reactはユーザーインタフェースを自動的に再構築します.
    render()関数で構築インタフェースを初期化すると,データの変化に注目するだけでよい.
    　　　　
    setState()を呼び出した後のインタフェースの更新は、キューメカニズムによって笑いを取ることによって一括修正され、thisを直接変更する.stateは予期せぬ行動を引き起こし、
    これをstateは読み取り専用プロパティとして使用されます.自分でrender()メソッドを呼び出すのではなく、Reactに残してバッチ処理を行い、最小の変化数を計算し、適切な実際のrender()を呼び出す
     
    これを通ってもいいです.stateオブジェクトはstateを取得し、stateを更新する際にthisを使用することができる.setState()のメソッド.これをsetState()が呼び出されると、Reactはrender()メソッドを呼び出し、ページを更新します.
     
    注意:setState()が呼び出されると、Reactはページを更新します.これは最も一般的な状況です.
    　　
    転載先:https://www.cnblogs.com/bllx/p/10740544.html
    初学者が関数型コンポーネントを使って困ったこと
    オンラインログ書き込みディスク遅延の問題