Bermula dengan React.js Bahagian 1_Kemahiran Javascript-tutorial js-php.cn

1. Pengenalan kepada JSX

①Definisi

JSX=JavaScript XML ialah sintaks seperti XML untuk membina teg di dalam komponen React. React masih boleh berfungsi tanpa menggunakan JSX, tetapi menggunakan JSX boleh meningkatkan kebolehbacaan komponen, meningkatkan semantik JS, struktur yang jelas, abstraksi tahap tinggi dan modularisasi kod. Oleh itu adalah disyorkan untuk menggunakan JSX dalam React.

②Ciri-ciri

1. Huruf pertama nama elemen

2. Mematuhi peraturan bersarang

3. Anda boleh menulis ungkapan penilaian

4. Penamaan sarung unta

5 Anda tidak boleh menggunakan beberapa kata kunci fungsi asli JavaScript, seperti untuk dan kelas. Perlu diganti dengan htmlFor dan className

③Cara menggunakan

1. Gunakan nilai dinamik: JSX menjadikan kandungan antara dua pendakap kerinting {...} ke dalam nilai dinamik. Contohnya:

var name=“winty”;

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

Salin selepas log masuk

2. Komen: Mula-mula, ulasan dalam nod anak hendaklah dibalut dalam kurungan kerinting, dan kemudian anda boleh mengulas /**/ pada satu baris atau komen // pada berbilang baris.

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

Salin selepas log masuk

3. Gunakan gaya sebaris CSS

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

Salin selepas log masuk

4. Gunakan pertimbangan bersyarat

//方法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>
  }
});

Salin selepas log masuk

④Pengenalan kepada atribut bukan DOM

Terdapat tiga atribut bukan DOM dalam JSX, iaitu: dangerouslySetInnerHTML, ref dan key.

dangerouslySetInnerHTML: Masukkan kod HTML terus dalam JSX, tetapi jika anda boleh mengelak daripada menggunakan atribut ini, cuba elakkan daripada menggunakannya.

Penggunaan innerHTML yang tidak betul boleh menyebabkan serangan skrip merentas tapak (XSS). Apabila input pengguna dibersihkan untuk paparan, ralat sering berlaku. Pembersihan yang tidak betul juga merupakan salah satu punca serangan halaman web.
Selepas memahami secara menyeluruh akibat keselamatan dan membersihkan data dengan betul, objek yang mengandungi hanya kunci unik __html dijana dan nilai objek ialah data yang telah dibersihkan. Contohnya:

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

Salin selepas log masuk

ref: Komponen induk merujuk kepada komponen anak Anda boleh menentukan rujukan dengan menetapkan nama rujukan yang diingini dalam atribut. Contohnya:

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

Salin selepas log masuk

kunci: ialah pengecam unik pilihan yang membolehkan React membuat keputusan dengan lebih mudah sama ada komponen perlu digunakan semula atau dimusnahkan dan dibina semula dengan menetapkan kunci unik pada komponen dan memastikan ia kekal konsisten merentas kitaran pemaparan A, dengan itu meningkatkan prestasi rendering. Contohnya:

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

Salin selepas log masuk

2. Penjelasan terperinci tentang kitaran hayat komponen React

Komponen pada asasnya ialah mesin keadaan Input ditentukan dan output ditentukan. Status dan keputusan sepadan satu-dengan-satu, menjadikan program ini intuitif. Fungsi cangkuk yang berbeza dicetuskan apabila peralihan keadaan berlaku, memberi peluang kepada pembangun untuk bertindak balas. Keadaan boleh difahami dari segi peristiwa, tetapi peristiwa adalah bebas antara satu sama lain, tetapi keadaan yang berbeza mungkin mempengaruhi satu sama lain.
Semua keadaan komponen digabungkan membentuk kitaran hayat komponen. Iaitu: fasa permulaan -> fasa larian -> fasa pemusnahan.

Fungsi boleh disesuaikan dalam kitaran hayat yang berbeza
Fasa permulaan:
①getDefaultProps: Dapatkan sifat lalai, hanya dipanggil sekali, selepas createClass. Berkongsi rujukan antara kejadian
②getInitialState: Mulakan keadaan permulaan unik bagi setiap kejadian
③componentWillMount:mout bermaksud memuatkan Kaedah ini bermakna komponen akan dimuatkan ke dalam halaman Ia juga merupakan peluang terakhir untuk mengubah suai keadaan sebelum memaparkan
④render: Komponen menjana nod maya dalam fungsi render, dan akhirnya bertindak balas menukar nod maya kepada nod sebenar dan menjadikannya pada halaman. Hanya this.props dan this.state boleh diakses, hanya terdapat satu komponen peringkat teratas dan sebaiknya jangan ubah suai keadaan dan output DOM.
⑤componentDidMount: Komponen tidak akan dipanggil sehingga ia dimuatkan, maksudnya, apabila kaedah ini dipanggil, komponen telah dipaparkan pada halaman Pada masa ini, DOM boleh diubah suai
Susunan pelaksanaan lima fungsi ini adalah dari atas ke bawah. Perlu diingatkan bahawa getDefaultProps hanya akan dipanggil apabila tika pertama komponen dimulakan, yang bermaksud bahawa tika kedua akan dipanggil daripada getInitialState. Sifat lalai adalah sama untuk semua kejadian komponen yang sama.
Kod ujian utama:

<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>

Salin selepas log masuk

运行结果：

运行中阶段：

①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}/> 变量

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

状态的含义：
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);
}

Salin selepas log masuk

示例中，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>

Salin selepas log masuk

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;

Salin selepas log masuk

父子组件之间的通信：
父组件->子组件：通过属性，父组件把数据通过属性来传递给子组件
子组件->父组件：本质上，子组件不能向父组件通信。但是可以间接地通过触发事件来通信，也就是委托。
嵌套组合缺点：
父子关系的具体实现需要经过深思熟虑，贸然编写将导致关系混乱、代码难以维护
无法掌握所有细节，使用者只知道组件用法，不知道实现细节，遇到问题难以修复
②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>
 );
 }
});

Salin selepas log masuk

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

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

Salin selepas log masuk

这样在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>

Salin selepas log masuk

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

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