背景
Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
// 此处script为解决与js语法不兼容问题，必须要加上type="text/babel"
//
</script>
</body>
</html>
1. react三个基本库
- react.js: React核心库
- react-dom.js: 提供与DOM相关的功能
- browser.min.js: 把JXS语法转化为javascript语法
react之'Hello World':
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('box')
);
ReactDOM.render方法为输出HTML方法，是react最基本的方法，将输入的内容插入制定的DOM中
2. JXS语法
在react中，遇到'<'则按照html语法执行，遇到'{'则按照js语法执行，JXS语法允许在模版中插入变量
var str = 'a';
ReactDOM.render(
<h1>{str}</h1>,
document.getElementById('box')
);
//页面则输出a。
如果变量为数组，则展开数组所有成员
var arr = [
<h1>Hello One!</h1>,
<h2>Hello Two</h2>
]
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('box')
);
//页面直接输出<h1>和</h2>
3. 组件
生成组件方法
//组件名称统一标准，开头字母大写，采用驼峰命名法
//React.creatClass为生成组件的方法,很少出现'定义组件'这个词
//HelloWorld为组件类
//当调用组件，模版插入<HelloWorld />类时，会自动生成一个HelloWorld的实例子
var HelloWorld = React.creatClass({
reder: function () {
return {
//this.props为一个对象，组件的属性可以在生成组件的内部通过this.props 获取
<h1>{this.prpos.name}</h1>
}
}
});
//组件调用
ReactDOM.render(
<HelloWorld name="HelloWorld" />,
document.getElementById('box')
);
组件为虚拟DOM,这也是react的基本核心思想,通过组件的状态改变来驱动,当状态改变时,只更新DOM,不重新渲染整个页面,这也是和传统js渲染整个页面最本质的区别和优点，即计算出当前虚拟DOM和状态改变后虚拟DOM的差异,只改变差异部分，提供性能。
组件的生命周期
1.实例化
由于react的思想是组件的组合, 同一个实例第一次创建时，会执行以下方法
- getDefaultProps
- getInitialState
- conponentWillMount
- render
- conponentDidMount
getDefaultProps方法
给是实例子设置默认的props值，一般为不可改变的值,另外也是对于父组件没有传递的属性，这个方法返回该实例自己使用的默认props值，该方法只会被调用一次.
当该组件类第二次及后续所有的应用，getDefaultProps方法已经不存在，不会被调用,只执行下面四种方法
- getInitialState
- conponentWillMount
- render
- conponentDidMount
getInitialState方法
在初始化每个实例的时候都会被调用，并且只调用一次，用来生成默认的状态属性值。
conponentWillMount方法
在每次渲染前被调用，此时还可以修改state的值，等到render方法执行时就state就不可改变了。
reder方法
render会创建一个虚拟DOM,来表示组件输出。对组件来说是唯一必须的方法,并需要满足下面几点条件：
- 只能通过this.props和this.state访问数据
- 可以返回null、false、或组件
- 只能出现一个顶级组件,不能返回一组元素,可用div包裹一层或是用组件包裹
- 不可改变组件的状态，或者DOM输出,组件状态只能在setState函数中修改
componentDidMount方法
在render方法调用并且DOM已经被渲染后，可以在componentDidMount方法内部通过this.getDOMNode()方法访问。
2.存在期
到这时,组件已经渲染完成，并且用户可以进行操作与组件进行交互，比如表单的change事件，react通过判断组件的状态的改变来作出响应更新DOM
var Input = React.createClass({
//设置默认state,确定视图状态,一般处理数据的简单变化,长用于表单
getInitialState: function () {
return {
val: 'Hello World'
};
},
changeInputVal: function (event) {
this.setState({
value: event.target.value
});
},
render: function () {
var val = this.state.val;
return (
<input type="text" value={value}
onChange={this.changeInputVal}/
);
}
});
ReactDOM.render(
<div>
<Input/>
//p的innerHTML值就会根据value的改变来更新DOM
<p>{this.state.value}</p>
</div>
document.getElementById('box')
);
当input的value变化的时候，就会触发changeInputVal事件，通过setState来改变value的状态值来更新DOM。
3. 销毁和清理期
当react使用完一个组件，这个组件就会从DOM中卸载并被销毁，componentWillUnMount方法就会作出响应，完成清理工作，随后移除顶级结构。
注：react数据流向为单向传递，父级组件传递给子组件，通过this.props在子组件中获取。复合组件使用的总结后续完成发出，今天由于时间关系还有bug需要改，先总结这些基础知识,demo暂时也不先做了。学习资料是结合阮一峰react教程,react中文网及react书籍。
网友评论