React.js 入門パート 1_JavaScript スキル

1. JSX の概要

①定義

JSX=JavaScript XML は、React コンポーネント内でタグを構築するための XML に似た構文です。 React は JSX を使用しなくても動作しますが、JSX を使用すると、コンポーネントの可読性の向上、JS セマンティクスの強化、明確な構造、高レベルの抽象化、およびコードのモジュール化が可能になります。したがって、React では JSX を使用することをお勧めします。

②特徴

1. 要素名の最初の文字を大文字にします

2. ネストルールを遵守する

3. 評価式を書くことができます

4. キャメルケースのネーミング

5. for や class など、JavaScript ネイティブ関数の一部のキーワードは使用できません。 htmlFor と className

に置き換える必要があります

③使い方

1. 動的値を使用する: JSX は 2 つの中括弧 {...} の間のコンテンツを動的値にレンダリングします。中括弧は JavaScript コンテキストを指定します。 例:

var name=“winty”;

<p>{name}</p>
function date(d){
 return [
 d.getFullYear(),
 d.getMonth()+1,
 d.getDate()
 ].join('-);
};
<p>{date(new Date()}</p>

2. コメント: まず、子ノードのコメントを中括弧で囲み、その後、/**/ を 1 行にコメントすることも、// を複数行にコメントすることもできます。

var Hello=React.createClass({
  render:function(){
   return <p name="winty"> //set name
     Hello ,World
     /*
     多行注释
     多行注释
     */
     </p>
   }
 });

3. CSS インライン スタイルを使用する

var style={
 color:#000;
};
React.render(<div style={style}>....</div>,document.body);

4. 条件判断を使用する

//方法1，三目运算符
var Hello=React.createClass({
  render:function(){
  return <p>Hello,{this.props.name&#63;this.props.name : "LuckyWinty"}</p>
  }
});

//方法2，if-else语句
var Hello1=React.createClass({
  getName:function(){
   if(this.props.name)
   return this.props.name;
   else
   return "LuckyWinty";
  render:function(){
  return <p>Hello,{this.getName}</p>
  }
});

//方法3，使用逻辑||运算符
var Hello3=React.createClass({
  render:function(){
  return <p>Hello,{this.props.name||"LuckyWinty"}</p>
  }
});

④非 DOM 属性の紹介

JSX には、dangerlySetInnerHTML、ref、key という 3 つの非 DOM 属性があります。

dangerouslySetInnerHTML: HTML コードを JSX に直接挿入しますが、この属性の使用を避けられる場合は、使用しないようにしてください。

innerHTML を不適切に使用すると、クロスサイト スクリプティング (XSS) 攻撃につながる可能性があります。 ユーザー入力をサニタイズして表示する場合、不適切なサニタイズが Web ページ攻撃の原因の 1 つになることがよくあります。
セキュリティ上の影響を十分に理解し、データを適切にサニタイズした後、一意のキー __html のみを含むオブジェクトが生成され、オブジェクトの値がサニタイズされたデータになります。例:

function createMarkup() { 
 return {__html: 'First · Second'}; 
};
<div dangerouslySetInnerHTML={createMarkup()} />

ref: 親コンポーネントは子コンポーネントを参照します。属性に必要な参照名を設定することで参照を定義できます。例:

...
render:function(){
 return <div>
   <input ref="MyInput" .../>
   </div>
}
...
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了

key: はオプションの一意の識別子であり、コンポーネントに一意のキーを設定し、コンポーネントのレンダリング サイクル全体にわたって一貫性を保つことで、コンポーネントを再利用するか破棄して再構築するかを React がより簡単に決定できるようにします。レンダリングのパフォーマンスが向上します。例:

var Hello3=React.createClass({
  render:function(){
  return <ul>
    <li key="1">1</li>
    <li key="2">2</li>
    <li key="3">3</li>
   </ul>
  }
});

2. React コンポーネントのライフサイクルの詳細な説明

コンポーネントは本質的にはステートマシンであり、入力が決定され、出力が決定されます。ステータスと結果は 1 対 1 に対応しており、直感的にプログラムを実行できます。状態遷移が発生するとさまざまなフック関数がトリガーされ、開発者に応答する機会が与えられます。状態はイベントの観点から理解できますが、イベントは互いに独立していますが、異なる状態は相互に影響を与える可能性があります。
コンポーネントのすべての状態が組み合わされて、コンポーネントのライフサイクルが形成されます。つまり、初期化フェーズ -> 実行フェーズ -> 破壊フェーズです。

さまざまなライフサイクルでカスタマイズ可能な機能
初期化フェーズ:
①getDefaultProps: createClass の後に 1 回だけ呼び出されるデフォルトのプロパティを取得します。インスタンス間での参照の共有
②getInitialState: 各インスタンス固有の初期化状態を初期化します
③componentWillMount:mout は読み込みを意味します。このメソッドは、コンポーネントがページに読み込まれようとしていることを意味します。また、レンダリング前に状態を変更する最後の機会でもあります。 ④render: コンポーネントはrender関数で仮想ノードを生成し、最後にReactにより仮想ノードを実際のノードに変換してページ上にレンダリングします。 this.props と this.state のみにアクセスでき、最上位コンポーネントは 1 つだけあり、状態と DOM 出力を変更しないことをお勧めします。
⑤componentDidMount: コンポーネントはロードされるまで呼び出されません。つまり、このメソッドが呼び出された時点で、コンポーネントはページ上にレンダリングされます。
これら 5 つの関数の実行順序は上から下です。 getDefaultProps は、コンポーネントの最初のインスタンスが初期化されるときにのみ呼び出されることに注意してください。これは、2 番目のインスタンスが getInitialState から呼び出されることを意味します。デフォルトのプロパティは、同じコンポーネントのすべてのインスタンスで同じです。
メインテストコード:

<script type="text/babel">
 var Hello=React.createClass({
  getDefaultProps:function(){
   console.log("getDefaultProps, 1");
  },
  getInitialState:function(){
   console.log("getInitialState, 2");
   return null;
  },
  componentWillMount:function(){
   console.log("componentWillMount, 3");
  },
  render:function(){
   console.log("render, 4");
   return <p>Hi,LuckyWinty!</p>
  },
  componentDidMount:function(){
   console.log("componentDidMount, 5");
  },
 });
 React.render(<Hello></Hello>,document.body);
</script>

运行结果：

运行中阶段：

①componentWillReceiveProps:这个函数在组件即将接收到属性时触发的，或者是父组件的属性发生变化时，属性在传送到组件之前，开发者有机会通过这个函数去处理属性。比如修改，更新内部状态等。
②shouldComponentUpdate：当组件接收到新属性或者新状态的时候触发的。这个是一个疑问函数，也就是说我们可以告诉react不去更新某个组件。因为有时候属性或者状态并不会导致组件发生更新。在组件不需要更新的情况下，手动使shouldComponentUpdate返回false，这样react就不需要再经过render和diff算法去判断是否要更新，从而提高性能。
③componentWillUpdate：render触发之前触发，更新组件，不能修改属性和状态
④render：组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上，只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidUpdate：render之后，真正的DOM被渲染之后调用
备注：这五个函数的执行顺序也是从上到下的。这个的测试代码已上传至：https://github.com/LuckyWinty/ReactStudyDemo，欢迎参考！

 销毁阶段：
①componentWillUnmount:这个函数在销毁操作真正执行之前调用，给开发者最后的机会进行一些清理工作。

三、属性、状态的含义和用法

属性的含义：
props=properties，属性是不可以由组件自己进行修改的，组件的属性是由父组件传递进来的。
属性的用法：
一）、键值对

<Hello name="winty"/> 字符串
<Hello name={123}/> 大括号包裹的求值表达式
<Hello name={[1,2,3]}/> 传入数组
<Hello name={winty}/> 变量

二）、展开定义（个人认为就是对象式定义）

var props={
 one:"123",
 two:"22"
}

这样定义的话，理论上使用应该是one={props.one}这样调用，但是这样写起来比较繁琐，而且如果数据被修改，就需要对应修改相应的赋值，并且无法动态地设置属性，所以react中添加了一种展开语法：
f3179ed08bfc30d733224c201dc315bc    //也就是三个点加上对象名称。
这样使用展开语法，react就会自动把对象中的变量和值当作是属性的赋值，所以Hello实际上就拿到了one、two两个属性，如果没有三个点的话，Hello拿到的实际上就是props对象，使用的时候还需要自己从中取出变量和值
三）、调用react提供的setProps（）函数（几乎不用）

var instance=React.render(<HelloWorld></HelloWorld>,document.body);
instance.setProps({name:"winty"});

状态的含义：
state,状态是由事物自行处理、不断变化的
状态的用法：
getInitialState：初始化实例的状态
setState：更新组件状态，一旦更新了状态，那么就会触发diff算法，检查内容是否发生变化，若有变化则更新组件，否则就不用。 

属性和状态对比
相似点：都是纯JS对象、都会触发render更新、都具有确定性。

属性和状态区分：组件在运行时需要修改的数据就是状态 

四、React中事件的用法
事件处理函数：React绑定事件处理器的方法和HTML语法非常类似，所有的事件在命名上与原生的javascript规范一致，并且会在相同的情境下触发。
编写函数
handleClick:function(){
...
}
绑定
onClick={this.handleClick} 

各类事件详细说明：
①移动设备上的触摸事件：onTouchCancel、onTouchEnd、onTouchMove、onTouchStart
②键盘类事件：onKeyDown、onKeyPress、onKeyUp
③剪切类事件：onCopy、onCut、onPaste
④表单类：onChange//内容变化即触发、onInput//输入框、onSubmit//禁止表单默认跳转行为
⑤事件：onFocus、onBlur
⑥UI元素类：onScroll
⑦鼠标滚动事件：onWheel
⑧鼠标类型：onClick、onContextMenu//右键菜单、onDoubleClick //双击、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp
⑨拖拽事件：onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart
事件对象介绍
使用方法：就是在编写事件对象处理函数的时候，添加一个参数。拿到这个对象之后，就通过对象的属性来可以获取一些信息。
例如：

handleChange:function(event){
 console.log(event.target.value);
}

示例中，event就是事件对象，event.target就是事件对象的属性，就是对应的DOM元素，拿到这个元素之后再获取它的值。
事件对象属性
通用属性：

 其他不同类型的事件有不同的属性，简单了解一下

知道了事件的一些属性，我们就可以很方便地在React中获取这些属性，进行一些逻辑的处理，实现一些复杂的业务功能、页面效果等。

例如：我们可以利用鼠标事件属性，实时显示鼠标在某个区域的坐标：

<script type="text/jsx">
  var HelloWorld = React.createClass({
   getInitialState: function () {
    return {
     x: 0,
     y: 0
    }
   },
   handleMouseMove: function (event) {
    this.setState({
     x: event.clientX,
     y: event.clientY
    });
   },
   render: function () {
    return <div onMouseMove={this.handleMouseMove} style={{
     height: '500px',
     width: '500px',
     backgroundColor: 'gray'
    }}>
    {this.state.x + ', ' + this.state.y}
    </div>;
   },
  });
  React.render(<HelloWorld></HelloWorld>, document.body);
 </script>

x组件协同使用的定义：组件的协同本质上就是对组件的一种组织、管理方式。
组件协同使用的目的：逻辑清晰、代码模块化、封装细节、代码可复用。
组件协同使用的方式：
①组件嵌套使用：也就是说，用一个父组件把子组件包裹起来，本质就是父子关系。如下图描述：

实例代码：

var React = require('react');
var CommentList=require('./CommentList.jsx');
var CommentForm=require('./commentFrom.jsx');

var CommentBox = React.createClass({
 render: function() {
 return (
  <div className="commentBox">
  <h1>Comments</h1>
  <CommentList /> //这是一个组件
  <CommentForm /> //这是另一个组件
  </div>
 );
 }
});

module.exports = CommentBox;

父子组件之间的通信：
父组件->子组件：通过属性，父组件把数据通过属性来传递给子组件
子组件->父组件：本质上，子组件不能向父组件通信。但是可以间接地通过触发事件来通信，也就是委托。
嵌套组合缺点：
父子关系的具体实现需要经过深思熟虑，贸然编写将导致关系混乱、代码难以维护
无法掌握所有细节，使用者只知道组件用法，不知道实现细节，遇到问题难以修复
②Mixin:也就是可以把相同的代码抽象出来，封装成一个函数，然后再调用。

Mixin的目的:横向抽离出组件的相似代码
相似概念：面向切向面编程、插件
实例代码：

var Time=React.createClass({
 mixins:[IntervalMixin(1000)],
 getInitialState:function(){
  return {secondElapsed:0};
 },
 onTick:function(){
 this.setState({secondElapsed:this.state.secondElapsed+1});
 },
 render:function(){
 return (
  <div>Seconds Elapsed:{this.state.secondsElapsed}</div>
 );
 }
});

mixin相当简单，它们就是混合进组件类中的对象而已。React在这方面实现得更加深入，它能防止静默函数覆盖，同时还支持多个mixin混合。但是这些功能在别的系统中可能引起冲突。例如：

React.createClass({
 mixins:[{
  getInitialState:function(){ return {a:1}}
 }],
 getInitialState:function(){ return {b:2}}
});

这样在mixin和组件类中同时定义了getInitialState方法，得到的初始state是{a:1,b:2}.如果mixin中的方法和组件类中的方法返回的对象中存在重复的键，React会抛出一个错误来警示这个问题。

 六、React中的双向绑定

React创立的理念跟angular那些框架就是不同的，React是单向数据绑定的。那么怎么实现像angular那样的双向绑定效果呢？看代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>React中的双向数据绑定</title>
</head>
<body>
 <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
 <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
 <script type="text/jsx">
  var BindingMixin = {
   handleChange: function(key) {
    var that = this
    var newState = {}
    return function(event) { 
     newState[key] = event.target.value
     that.setState(newState)
    }
   }
  }
  var BindingExample = React.createClass({
   mixins: [React.addons.LinkedStateMixin],
   getInitialState: function() {
    return {
     text: '',
     comment: '',
    }
   },
   render: function() {
    return <div>
     <input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} />
     <textarea valueLink={this.linkState('comment')}></textarea>
     <h3>{this.state.text}</h3>
     <h3>{this.state.comment}</h3>
    </div>
   }
  })
  React.render(<BindingExample></BindingExample>, document.body);
 </script>
</body>
</html>

效果图（没有CSS样式，有点不优雅，见谅）：

以上就是本文的全部内容，希望对大家的学习有所帮助。