React(1)-初识JSX

5253次阅读

共计 3326 个字符，预计需要花费 9 分钟才能阅读完成。

首先，提供几个关于ReactJS学习地址，以及介绍。
ReactJS中文官网地址：http://www.react-china.com/index.html
ReactJS英文官网地址：https://facebook.github.io/react/index.html
React中文文档地址：https://chenyitian.gitbooks.io/react-docs/content/
Facebook React Web Framework：https://gitwillsky.gitbooks.io/react/content/
React 入门教程：https://hulufei.gitbooks.io/react-tutorial/content/
React 學習手冊：https://cswleocsw.gitbooks.io/react-guide-learing/content/
React 实战：https://sfantasy.gitbooks.io/react-in-action/content/

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 MVC 中的 V（视图）。

我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。

1.简单
仅仅只要表达出你的应用程序在任一个时间点应该呈现的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
2.声明式 (Declarative)
数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。

3.构建可组合的组件
React 都是关于构建可复用的组件。事实上，通过 React 你唯一要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。

什么是JSX?其实JSX并不是新的语言，仅仅是语法糖，类似的typeScript也是如此，它允许开发者在JS中使用HTML语法，最后每个HTML都会转化为JS语言。另外说一下，语法糖也叫糖衣语法，是指计算机语言中添加某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说只是增加程序的可读性。

JSX的语法：

1，首字母大写
2，嵌套
3，求值表达式
4，驼峰命名
5，class->className;for->htmlFor

JSX的语法特点：

1，类XML语法容易接受
2，增强JS语义
3，结构清晰
4，抽象程度高
5，代码模块化

举个栗子：这是常用的HELLO WORLD事例
首先引入React相关的JS，和JSX编译器browser,script标签的type=”text/babel”

<script src="../JS/react-0.14.7/build/react.js" type="text/javascript" charset="utf-8"></script>
<script src="../JS/react-0.14.7/build/react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
var Hello = React.createClass({
  render: function() {
    return <div>
    	注释要放在{}中
    	{
    	//这是单行注释
    	/*
    	 多行注释
    	*/
    	}
    	Hello {this.props.name}
    </div>
  }
});

ReactDOM.render(
  <hello name="World" />,
  document.getElementById('container')
);
</script>

JSX的非DOM属性

1，dangerouslySetlnnerHTML:在JSX中直接插入HTML代码，只有在html需要动态生成时候才使用。
2，ref：React父组件引用子组件
3，key：提高React渲染的性能
4，自定义属性，用HTML5给出的data-方案，这样的属性会渲染在DOM上，而其他自定义属性不会

dangerouslySetlnnerHTML属性，举个栗子


var Hello = React.createClass({
  render: function() {
    return  <div>
    	<div dangerouslySetInnerHTML={{__html: "<h1>这是一个H1标签</h1>"}}> </div>
    	{'<strong>content</strong>'}
     </div>
  }
});

ReactDOM.render(
  <hello />,
  document.getElementById('container')
);

ref：React父组件引用子组件，举个栗子

			var HelloBtn = React.createClass({
				handerClick:function(e){
					var tip = ReactDOM.findDOMNode(this.refs.tip);
					if(tip.style.display === 'none'){
						tip.style.display = 'inline';
					}else{
						tip.style.display = 'none';
					}
					e.stopPropagation();
					e.preventDefault();
				},
				render: function() {
    				return (
    					 <div>
    						事件绑定：
     						<button className="commentBox" onClick={this.handerClick}>显示|隐藏</button>
      						<span ref='tip'>Hello, {this.props.name}.</span>
      					 <div>
    				);
  				}
			});
			
			ReactDOM.render(
			        <hellobtn name="itattoo" />,
  				document.getElementById('container')
			);

key：提高React渲染的性能，关于key,react有一个diff算法

什么是DOM Diff算法?

Web界面由DOM树来构成，当其中某一部分发生变化时，其实就是对应的某个DOM节点发生了变化。在React中，构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面，然后由React来比较两个界面的区别，这就需要对DOM树进行Diff算法分析。
国内有一篇很好的文章深入浅出React（四）：虚拟DOM Diff算法解析，讲的很是详细;
此外这是国外的一片关于diff的文章React’s diff algorithm

下面是一个流程图。

JSX的条件语句使用

1，三元表达式。
2，函数调用
3，变量
4，比较运算符 ||

举个栗子

var LikeButton = React.createClass({
  getInitialState: function() {
    return {
    	liked: false
    };
  },
  handleClick: function(event) {
    this.setState({
    	liked: !this.state.liked
    });
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <likebutton />,
  document.getElementById('example')
);

JSX中延展属性，你可以在JSX中使用强大的ES6的属性。比如{…props}等。
JSX的样式使用也很简单，通过style = {{color:red}}的方式使用，当然也使用变量。

正文完