React基础之JSX语法
概述JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。 使用JSX语法后,你必须要引入babel的JSX解析器,把JSX转化成JS语法,这个工作会由babel自动完成。同时引入babel后,你就可以使用新的es6语法,babel会帮你把es6语法转化成es5语法,兼容更多的浏览器。 Jsx语法例子为了更好的理解Jsx语法的特点,我们先看一个官网例子helloworld。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="vendor-js/react.js"></script>
<script src="vendor-js/react-dom.js"></script>
<script src="vendor-js/babel-core/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> ReactDOM.render( <h1>Hello,world!</h1>,document.getElementById('example') ); </script>
</body>
</html>
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。而如果转化成纯JavaScript 的语法来写: <script type="text/javascript"> ReactDOM.render( React.DOM.h1(null,'hello,world!'),document.getElementById('example') ); </script>
在JSX语法中有两个地方需要注意: 1,script标签的 type 属性为 text/babel,这是React 独有的 JSX 语法,跟 JavaScript不兼容。凡是在页面中直接使用 JSX 的地方,都要加上 type=”text/babel”。 2,一共用了三个库: react.js 、react-dom.js 和 browser.min.js,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,browser.min.js的作用是将 JSX 语法转为 JavaScript 语法。 Jsx 的特点jsx语法具有以下特点:
类XML语法,易于理解JSX本身就和XML语法类似,可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。 var arr = [
<h1>Hello world!</h1>,<h2>React is awesome</h2>,];
ReactDOM.render(
<div>{arr}</div>,document.getElementById('example')
);
组件化使用jsx来将代码封装成React组件,然后像插入普通 HTML 标签一样,在其他地方插入这个组件。使用React.createClass还可以生成一个组件。而采用组件化开发使代码更加清晰,重用性也更高。 var MyComponent=React.createClass({
render: function() {
return <h1>Hello world!</h1>;
}
});
ReactDOM.render(
<MyComponent />,document.getElementById('example')
);
使用Jsx应注意;
//要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
var myDivElement = <div className="foo" />;
React.render(myDivElement,document.getElementById('example'));
//要渲染 React 组件,只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent />;
React.render(myElement,document.getElementById('example'));
//var myDivElement =<h1>你好</h1><h1>hello</h1>;
//上述写法是会报错的,要写成只有一个顶层标签:
var myDivElement =<div><h1>你好</h1><h1>hello</h1></div>;
上述代码一个静态的组件,而使用状态机State可以制作动态组件。来看一个例子: var MyComponent=React.createClass({
getInitialState: function() {
return {clickNum: 0};
},handleClick:function(){
var num=this.state.clickNum;
num++;
this.setState({clickNum:num});
},render: function() {
return (
<div>
<h1 onClick={this.handleClick}>Hello {this.props.name}!</h1>
<h2 style={{color:'red'}}>点击{this.props.name}次数:{this.state.clickNum}</h2>
</div>
);
}
});
ReactDOM.render(
<div>
<MyComponent name="张三" />
<hr/>
<MyComponent name="李四" />
</div>,document.getElementById('example')
);
上面代码中定义的MyComponent组件包含属性,状态和事件,是一个简单的比较完整的组件。使用props通过父组件进行传递值,使用state定义组件自己的状态。 关于组件的属性,我们应该注意以下几点:
注:如果往原生 HTML 元素里传入 HTML 规范里不存在的属性,React 不会显示它们。如果需要使用自定义属性,要加 data- 前缀。 <div data-custom-attribute="foo" />
PropTypes组件的属性props可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。React中使用PropTypes进行参数的校验。 var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,},render: function() {
return <h1> {this.props.title} </h1>;
}
});
上面的代码PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串,如果传入的不是字符串,就会报错。 获取DOM节点组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。 var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
为了获取真实的DOM节点,html元素必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 求值表达式在编写JSX时,在 { } 中不能使用语句(if语句、for语句等等),但可以使用求值表达式,这本身与JSX没有多大关系,是JS中的特性,它是会返回值的表达式。我们不能直接使用语句,但可以把语句包裹在函数求值表达式中运用。 组件生命周期在React中,组件的生命周期主要有三个状态:
附:http://www.52php.cn/article/p-ylyffgsx-qr.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |