Getting Started with React.js Part 1_Javascript Skills

1. Introduction to JSX

①Definition

JSX=JavaScript XML is an XML-like syntax for building tags inside React components. React can still work without using JSX, but using JSX can improve the readability of components, enhance JS semantics, clear structure, high level of abstraction, and code modularization. Therefore it is recommended to use JSX in React.

②Features

1. Capitalize the first letter of the element name

2. Comply with nesting rules

3. You can write evaluation expressions

4. Camel case naming

5. You cannot use some keywords of JavaScript native functions, such as for and class. Need to be replaced with htmlFor and className

③How to use

1. Use dynamic values: JSX renders the content between two curly braces {...} into dynamic values. The curly braces specify a javascript context. The curly braces can be a variable or a function. . For example:

var name=“winty”;

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

2. Comments: First, comments in child nodes should be wrapped in curly brackets, and then you can comment /**/ on a single line or comment // on multiple lines.

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

3. Use CSS inline styles

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

4. Use conditional judgment

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

④Introduction to non-DOM attributes

There are three non-DOM attributes in JSX, namely: dangerouslySetInnerHTML, ref, and key.

dangerouslySetInnerHTML: Insert HTML code directly in JSX, but if you can avoid using this attribute, try to avoid using it.

Improper use of innerHTML may lead to cross-site scripting (XSS) attacks. When user input is sanitized for display, errors often occur. Improper sanitization is also one of the causes of web page attacks.
After thoroughly understanding the security consequences and properly sanitizing the data, an object containing only the unique key __html is generated, and the value of the object is the sanitized data. For example:

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

ref: The parent component refers to the child component. You can define a reference by setting the desired reference name in the attribute. For example:

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

key: is an optional unique identifier that allows React to more easily decide whether a component should be reused or destroyed and rebuilt by setting a unique key to the component and ensuring that it remains consistent across a rendering cycle. A component, thereby improving rendering performance. For example:

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. Detailed explanation of React component life cycle

A component is essentially a state machine. The input is determined and the output is determined. Status and results correspond one-to-one, making the program intuitive. Different hook functions are triggered when a state transition occurs, giving developers a chance to respond. The state can be understood in terms of events, but events are independent of each other, but different states may affect each other.
All states of a component combined form the component's life cycle. That is: initialization phase -> running phase -> destruction phase.

Customizable functions in different life cycles
Initialization phase:
①getDefaultProps: Get the default properties, only called once, after createClass. Sharing references between instances
②getInitialState: Initialize the unique initialization state of each instance
③componentWillMount:mout means loading. This method means that the component is about to be loaded into the page. It is also the last opportunity to modify the state before rendering
④render: The component generates virtual nodes in the render function, and finally react converts the virtual nodes into real nodes and renders them on the page. Only this.props and this.state can be accessed, there is only one top-level component, and it is best not to modify the state and DOM output.
⑤componentDidMount: The component will not be called until it is loaded. That is to say, when this method is called, the component has been rendered on the page. At this time, the DOM can be modified
The execution order of these five functions is from top to bottom. It should be noted that getDefaultProps will only be called when the first instance of the component is initialized, which means that the second instance will be called from getInitialState. The default properties are the same for all instances of the same component.
Main test code:

<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中添加了一种展开语法：
//也就是三个点加上对象名称。
这样使用展开语法，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样式，有点不优雅，见谅）：

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