この記事では主にreactについての学習を紹介し、reactについての知識ポイントをまとめています
正式にreactの学習を始めましょう
1. 大文字の場合、小文字の場合は、DOM 自体の要素名として扱われます。カスタム コンポーネント名の最初の文字が小文字の場合、エラーは報告されませんが、表示されません。
2. カスタム コンポーネントの戻りの最外層に存在できるノードは 1 つだけです。
3. HTML内に{}内の記述はできませんが、評価式は記述できます。ただし、ステートメントを関数内に記述し、その関数を {} で呼び出すことはできます。
4. 関数名とラベル名はキャメルケースで付けられます。
5. htmlFor と className を使用します。例:
6. スタイルの記述: jsx では var style = {color:"red",backgroundColor:"blue"} を使用できます。次に、カスタム タグに style={style} を追加します。キャメルケース表記を使用してください。
7. 非 DOM 属性:
a. 危険なほど SetInnerHTML: JSX に直接 HTML コードを挿入します
b. ref: 親コンポーネントが子コンポーネントを参照します
c. レンダリングのパフォーマンスを向上させます。 diff アルゴリズム
8. コンポーネントの各ライフサイクルで実行される関数: a. 初期化。
b.ランニング。
c. 破壊する。
9. 属性の使用法:
a,
b,
var props = {
one:"123",
two:"456"
}
<HelloWorld {...props}/> //展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body);a.setProps({name:" Tim"} ; 10. 状態の使用法:
var HelloWorld = React.createClass({ render:function(){ return <p>Hello,{this.props.name||"world"}</p> } }); var HelloUniverse = React.createClass({ handleChange:function(e){ this.setState({ name:e.target.value }); }, getInitialState:function(){ return { name:'', } }, render:function(){ return <p>
<HelloWorld {...this.state}/>
<input type="text" onChange={this.handleChange} />
</p> } }); var a = ReactDOM.render(<HelloUniverse/>
,document.getElementById("root"));11. 属性と状態の類似点と相違点
12. イベント処理関数
13. イベントオブジェクトのプロパティ
14. コンポーネントの共同使用
父と息子の間 共同使用の場合、子コンポーネントを使用して親コンポーネントのメソッドを呼び出すことができます。この目標を達成するために、親コンポーネントは props
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var GenderSelect = React.createClass({ render:function(){ return <select name="gender" onChange={this.props.handleSelect}>
<option value="1">男</option>
<option value="0">女</option>
</select> } }); var SignupForm = React.createClass({ getInitialState:function(){ return { name:'', pwd:'', gender:'', } }, handleChange:function(name,e){ var newState = {} newState[name] = e.target.value; this.setState(newState); }, handleSelect:function(e){ this.setState({gender:e.target.value}); }, render:function(){ console.log(this.state) return <form>
<input type="text" onChange={this.handleChange.bind(this,'name')}/>
<input type="text" onChange={this.handleChange.bind(this,'pwd')}/>
<GenderSelect handleSelect={this.handleSelect}/>
</form> } }); var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
</script>
</body>
</html>を介して子コンポーネントに渡されます (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual 列にアクセスしてください)学習)兄弟コンポーネント これは、子コンポーネント A を親コンポーネントに渡し、親コンポーネントがそれを子コンポーネント B に渡すことで実現できます。
15、mixin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var SetInit = { handleClick:function(e){ console.log(e.target.value); } } var Hello = React.createClass({ //这里命名必须为mixins
mixins:[SetInit], render:function(){ return <input type="button" onClick={this.handleClick} value="123123"/> } }); var a = ReactDOM.render(<Hello />,document.getElementById("root"));
</script>
</body>
</html>利点と欠点:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var BindingMixin = { handleChange:function(name){ var that = this; return function(e){ var news = {}; news[name] = e.target.value; that.setState(news); } } }; var Example = React.createClass({ //这里命名必须为mixins
mixins:[BindingMixin], getInitialState:function(){ return { text:'' } }, render:function(){ return <p>
<input type="text" onChange={this.handleChange('text')} />
<p>{this.state.text}</p>
</p> } }); var a = ReactDOM.render(<Example />,document.getElementById("root"));
</script>
</body>
</html>16、制御可能なコンポーネントと制御不可能なコンポーネント制御可能なコンポーネント
制御可能なコンポーネントとは、次の値です。 value は、value={this.state.value} のようにハードコーディングされていません。
制御不能はその逆です。
できるだけ制御可能なコンポーネントを使用するようにしてください
発生した問題:
1. wepack.config.js 設定項目では、モジュール内のローダーには複数の設定項目があるため、ローダーである必要がありますが、私が書いたものははloaderであるため、後続の設定項目が有効にならず、多くのコンパイルの問題が発生しました。 。 。
2. コンポーネントのレンダリング内の return タグの場合、
がと書かれている場合、タグの最後に / を入力するのを忘れてください。 React はこれを 2 つの p タグとして認識します。埋め込まれた次の内容を報告します: のように、レンダリング内のペアになっていないタグはすべて閉じられている必要があります。埋め込み:
4 に対応する JSX 終了タグが必要です。非常に興味深いことです。特定の関数で特定の属性を setState した場合、この属性をすぐに出力すると正しい結果が得られません。正しい結果は、componentDidUpdate 関数内にあります。つまり、コンポーネントが更新されるまで待ってから出力します。
5. 子コンポーネントの prop が親コンポーネントで更新される場合、この prop を getInitialState 関数にプロパティとして入れないでください。prop が更新されても、子コンポーネントは状態のプロパティを更新しません。 （その中の11の表を参照）。
6. es6 構文を使用する、つまり React.Component を継承する方法を使用してコンポーネントをビルドする場合、getInitialState() 関数は使用できず、警告 Warning: getInitialState was generated on TodoApp, a plain JavaScript classこれは、React.createClass を使用して作成されたクラスでのみサポートされます。 代わりに?
解決策: コンストラクターをセットアップします
constructor(props){
super(props);
this.state = {
example:'example',
}
}この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
React ユーザー マニュアルの列にアクセスして学習してください)。以下のメッセージ。
以上が反応についてどのような知識を学べばよいですか? React の知識ポイントの概要 (完全な例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
