この記事では主にreact についての学習を紹介し、reactについての知識ポイントをまとめています
正式にreactの学習を始めましょう
1. 大文字の場合、小文字の場合は、DOM 自体の要素名として扱われます。カスタム コンポーネント名の最初の文字が小文字の場合、エラーは報告されませんが、表示されません。
2. カスタム コンポーネントの戻りの最外層に存在できるノードは 1 つだけです。
3. HTML内に{}内の記述はできませんが、評価式は記述できます。ただし、ステートメントを関数内に記述し、その関数を {} で呼び出すことはできます。
4. 関数名とラベル名はキャメルケースで付けられます。
5. htmlFor と className を使用します。例: Name
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 列にアクセスしてください)学習)
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> ログイン後にコピー
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 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> ログイン後にコピー
mixin
制御可能なコンポーネントとは、次の値です。 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)
