【前端】一个更底层库-React基础知识点

var Hello = React.createClass({
render : function {
//获得传输的属性值
return 
Hello ithis.props.name}
;
});
React.render(，document.getElementById( ' container'));
//运行结果过
Hello World

#
1

//实质上它编译出的代码是一下这样的

React.createElement( 'div ' ,{className: 'x'},
[
React.createElement( 'a' ,{href : '#'},'#' )，React.createElement (Component,{x:'y'},1);
]);

注意和 html语法不太一样，比如必须是驼峰命名,以及属性名不能和js关键字冲突,例如:className,readQnly。

最终执行的是返回了一颗对象树的根结点，class是不能用的，因为他是保留的关键字，所以要使用className代替。

组件命名必须是大写，大写的话是自定义组件，小写的是普通的html标签。

JSX嵌入变量

Jsx很重要的作用是嵌入到javascript，和一般的模板语言差不多，使用两个括号括起来
可以通过{变量名}来将变量的值作为属性值

var x = 'https://www.csdn.net/' ;
var y = x}target="_blank">
alipay. com;
React.render(y，document.getElementById( ' container'));

Event事件

开发客户端编程，不可避免的是要去挖事件，事件和传统的HTML是不一样的，react把我们想要处理的操作和UI放在一起，进行内聚，但是传统的不可避免是需要全局变量污染，后面状态维护会很难搞，而React解决了全局污染问题。

可以通过设置原生dom组件的onEventType属性来监听dom事件，例如onClick, onMouseDown，在加强组件内聚性的同时,避免了传统html的全局变量污染，把组件所有的行为状态放入组件内部，组件可渲染很多个，因为每个组件都是自己的 。

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 (
this.handleclick}>You {text} this. click to toggle.
);
React.render(
,Document.getElementById(‘container’)
)

组合

推荐组合不推荐继承，react不支持继承，可以像使用原生Dom组件一样使用自定义的组件：

var A = React.createClass(i
render(i
return a
}
});
var B = React.createClass({
render(){
return !;
};
React.render( , document.getElementById( ' container ' ));

var B = React.createClass(irender(i
return 
{React.Children.map(this.props.children, function(c){return 
{c}
;})}
;
}});React.render(a href=#">12
 ,document.getElementById( ' container' ;）