温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

React.js 基础入门四--要点总结

发布时间:2020-05-31 18:34:01 来源:网络 阅读:606 作者:bin82012 栏目:web开发

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。


1. HTML 标签 和 React 组件

    在JS中写HTML标签,也许小伙伴们都惊呆了,那么React又是怎么区分HTML标签,React组件标签?


HTML标签:


var myDivElement = ;
React.render(myDivElement, document.body);


React组件标签:


  1. var Div= React.createClass({/*...*/});

  2. var myElement = << span="">Div someProperty={true} />;

  3. React.render(myElement, document.body);    

    插播:

        1. 注意大写开头* 

        2. 不要随意document.body, 它是覆盖不是追加。(及时代码找的回来)

        3. 属性someProperty={true}


是不是很简单,一眼就发现了,congruatulations 聪明的你已经理解!



2. JSX与原生态JavaScript 

	//使用JSX
React.render(	content,
	document.getElementById('example')
);
//不使用JSX
React.render(
	React.createElement('div', null,
		React.createElement('div', null,
			React.createElement('div', null, 'content')
		)
	),
	document.getElementById('example')
);

那么也就是说,我们写一个XML标签,实质上就是在调用 React.createElement 这个方法,并返回一个 ReactElement 对象。

API中:

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...])  #注意此处的省略号

第一个参数可以是一个字符串,表示是一个HTML标准内的元素,或者是一个ReactClass类型的对象,表示我们之前封装好的自定义组件。

第二个参数是一个对象,或者说是字典也可以,它保存了这个元素的所有固有属性(即传入后基本不会改变的值)。

从第三个参数开始,之后的参数都被认作是元素的子元素。



JSX的转换

React JSX 将元素的标签、属性和子元素都会被当作参数传给 React.createElement 方法:

		// JSX
		var Nav;
		var app = ;
		
		// native JS
		var Nav;
		var app = React.createElement(Nav, {color:"blue"});
JSX的转化器

    这个工具会把使用JSX语法的文件转换成纯的可以直接在浏览器里面运行起来的JavaScript文件。它也会为你监视目录,然后自动转换变化的文件


    要把带有JSX语法的代码转化为纯Javascript代码,有多种方式:

1. 对于内联与HTML中的代码或者是未经过转化的外部文件,在 script 标签中要加上 type="text/jsx" ,并引入 JSXTransformer.js 文件即可。





2. 不过这种方式并不建议在生产环境使用,建议的方法是在代码上线前就将代码转换好,可以使用npm 全局安装 react-tools :

#npm install react-tools -g


并使用命令行工具转化即可(具体用法可以参考 jsx -h 或者 jsx --help ) jsx 通过watch实时监控,具体使用看帮助吧。此处只列举试例:

# jsx --watch src/ build/

( #表示linux中的用户权限,windows用户大可不用理睬 )


大爱无边的React. render

React.render方法可以渲染HTML结构,也可以渲染React组件。 

(此处与上面重复,只做演示)

  1.  渲染HTML标签,声明变量采用 字母

var myDivElement = ;
React.render(myDivElement, document.body);	

2.   渲染React组件,声明变量采用 字母

var MyComponent = React.createClass({/*...*/});
var myElement = ;
React.render(myElement, document.body);	


不过需要注意的是 class 和 for 属性(不太确定多少个,等查阅api后续增加),JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样, 用className 和 htmlFor 。

//使用JSX
React.render(	content,
	document.getElementById('example')
);
//不使用JSX
React.render(
	React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
	document.getElementById('example')
);	

相信你一眼就瞅出了不同点。


可恶但有可爱之处:

在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加 data- 前缀。


上同样的代码:

var HtmlOptions = React.createClass({
	render:function (){
		return (			 属性延伸
		);
	}
});

var ys = ; 
React.render(ys, document.getElementById('htmls'));

渲染后,看看你的标签总是否有zz的属性,恭喜你........

是不是没有? 哈哈,那就对了, 把zz替换成data-zz试试。


看上去高大上的用法(捂住)

有人说,用了这些写法后,不会再写原生态的JS代码了, 是的,懒(和)做(谐)才会是天朝。

比如开发组件的时候,一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:

var Form = MyFormComponent;
var App = (	);	

插播: 此处又要插播了(这是我们的爱好,插播才能提升质量)

React 组件标签

这样的写法表示 自闭合标签(


还要注意:都要开头大写,并且加上父类组件标签哦。为啥呢? follow


这样你只需将子组件的 ReactClass 作为其父组件的属性:

var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });	


利用子组件 和 父组件形式 再来渲染。


然而这也是可以的:

	var App = (
		React.createElement(Form, null,
		    React.createElement(Form.Row, null,
		        React.createElement(Form.Label, null),
		        React.createElement(Form.Input, null)
		    )
		)
	);

该功能需要0.11及以上版本

Javascript表达式

在JSX语法中写Javascript表达式只需要用 {} 即可,比如下面这个使用三目运算符的例子:

JSX是HTML和JavaScript混写的语法,当遇到 < ,JSX就当HTML解析,遇到 { 就当JavaScript解析。

	// Input (JSX):
	var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
	// Output (JS):
	var content = React.createElement(
		Container,
		null,
		window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
	);	

属性表达式
	React.render(
		<div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
		document.body
	);	
子表达式
	var Nav = React.createClass({
		render: function () {
		return <div>nav</div>
		}
	});
	React.render(
		<div>
		    {2 > 1 ? <Nav/> : <div>div</div>}
		</div>,
		document.body
	);	

卧去, so easy!是不是?

相信你会想到这样写更碉堡。

	// This JSX:
	<div id={if (condition) { 'msg' }}>Hello World!</div>
	
	// Is transformed to this JS:
	React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");	


多高大上啊。可惜是错误的

这让我想起了PHP中html与php混淆的写法。

<div><?php if ( 1>0 ){ echo '碉堡了'; } ?></div>

 或者Pyhon中

[x+n for x in range(0,100) for n in range(0,10) if x%3==0 if n%5==0 ]

看不懂,超碉堡啊! CAO, 是难看,不是看着难。



可以从转化后的Javascript代码中看出明显的语法错误,所以要不用三目运算符,要不就这样写:

	if (condition) <div id='msg'>Hello World!</div>
	else <div>Hello World!</div>	




以下纯属赋值粘贴: 但经过验证,很不错

传播属性(Spread Attributes)

如果提前就知道了组件的属性的话,写起来很容易。例如component组件有两个动态的属性foo和bar:

var component = <Component foo={x} bar={y} />;

而实际上,有些属性可能是后续添加的,我们没办法一开始就确定,我们可能会写出下面不好的代码:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad	

这样写是错误的,因为我们手动直接添加的属性React后续没办法检查到属性类型错误,也就是说,当我们手动添加的属性发生类型错误时,在控制台是看不到错误信息的。

在React的设定中,初始化完props后,props是不可变的。改变props会引起无法想象的后果。

延伸属性

为了解决这个问题,React引入了属性延伸

	        var props = {};
		props.foo = x;
		props.bar = y;
		var component = <Component {...props} />;
		//或者
		var props = { foo: x, bar: y };
		var component = <Component { ...props } />;	

这样就相当于:

var component = <Component foo={x} bar={y} />

当需要拓展我们的属性的时候,定义个一个属性对象,并通过 {…props} 的方式引入,在JSX中,可以使用 ... 运算符,表示将一个对象的键值对与 ReactElement 的 props 属性合并,这个 ... 运算符的实现类似于ES6 Array中的 ... 运算符的特性。,React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的,不是手动添赋值的属性。

它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'	

JSX 陷阱

style属性

在React中写行内样式时,要这样写,不能采用引号的书写方式

React.render(
		<div style={{color:'red'}}>
		xxxxx
		</div>,
		document.body
);	
HTML转义

比如我们有一些内容是用户输入的富文本,从后台取到数据后展示在页面上,希望展示相应的样式.

var content='<strong>content</strong>';
		React.render(
		<div>{content}</div>,
		document.body
);

结果页面直接输出内容了:

<strong>content</strong>

React默认会进行HTML的转义,避免XSS***,如果要不转义,可以这么写:

var content='<strong>content</strong>';
		React.render(
		<div dangerouslySetInnerHTML={{__html: content}}></div>,
		document.body
		);	




最后推荐一个的博文博客:(没有看,大家可参考阅读)

http://blog.csdn.net/lihongxun945/article/details/45826851

http://blog.csdn.net/lihongxun945/article/category/5195241

阮一峰的react.js入门



本文来自链接:http://sowm.cn/css88/article/q6fiAf.html

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI