喽了一眼阮一峰老师的react文章，感觉写的挺棒，这篇只是按照自己思路屡一遍，纯属自学笔记，不承担社会*责任。前几天，打算学vuejs,师兄给了一句话的点播，感觉很醍醐灌顶。总结下，所有这种能够实现数据双向绑定的JS框架，对于业务而言，最大的影响：实现了DOM的自动刷新。实现改了一个地方的数据，与之相关的DOM节点会自动变成对应的样子。不用我们 手动的 跟在 事件 后面 用冗余的JS操作DOM。
--------写在前面的话
react正文即将开始。。。。。。。
一：语法层面（有待补充）
1. class 改为className
2. for 改为 HTMLfor
3.<body style='color:this.state.color'>;改为 <body style={{color:this.state.color}}>
4. 所有react在html页面中写在<script type='text/label'></script>
5. 在react中所有HTML都是可以直接写的，js也是。JSX语法默认,碰到'<'执行html,碰到'{'执行JS语法。
6.event.target.value 读取输入框的值。
三：具体使用（代码农民工，搬砖急需的。。。）
就按照正常的完成页面的逻辑，列举一下每个行为用reactJS怎么实现。如何获取渲染页面的数据------拿到数据渲染DOM--------操作DOM。
代码是拷贝的，注释是强行添加，o(╯□╰)o
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() { <!--设置默认数据-->
return {
username: '',
lastGistUrl: ''
};
}, componentDidMount: function() {
$.get(this.props.source, function(result)
{<!--请求数据，处理数据-->
var lastGist = result[0];
if (this.isMounted()) {
<!--将数据和DOM建立关系-->
this.setState({
<!--lastGist是刚刚自定义的数据名，userName是DOM中的取数据的key,owner,html_url,login都是数据源中的字段-->
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
}, render: function() {
return (
<div>
<!--将setState 中数据取出 -->
{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
}); ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
<!--source是请求数据接口的链接-->
document.body
);
<!--UserGist组件可以看成是一个渲染模板，数据源在实例化的时候提供-->
</script>
</body>
</html>
二：关于react自定义组件相关（第2点我写了好多。。。好占地方就只能放最后了，氮素，看完这个才能看懂第二点。。。）
在这之前先贴两段阮一峰老师文章中的代码，展示下reactJS基本的语法和写法
1.下面这个是最基本的
<!DOCTYPE html>
<html>
<head>balabala</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
2. 这个是业务一定会用的"组件"的写法规范
<html>
<head>balabala</head>
<body>
<script type="text/babel">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
}); ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
</script>
</body>
</html>
1.2.：综上：
(1):所有通过调用组件或者基本的react代码渲染页面的代码都写在：reactDOM.render();
(2):组件相关
1) 声明：var 组件名 = React.createClass({})，调用自定义组件<组件名 ></组件名>
2) 自定义组件中一定要有的方法render()
3)PropTypes，
a:PropTypes，组件类的属性，这个里面的内容，用于验证实例的属性是否符合要求。可以定义属性的类型（number，string..），属性是否必须(isRequired)等
b: 关于定义和使用。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
c: PropTypes使用详细说明
React.createClass({
propTypes: {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: React.PropTypes.node,
// A React element.
optionalElement: React.PropTypes.element,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: React.PropTypes.instanceOf(Message),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// An array of a certain type
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: React.PropTypes.func.isRequired,
// A value of any data type
requiredAny: React.PropTypes.any.isRequired,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
/* ... */
});
d: getDefaultProps 方法可以用来设置组件属性的默认值。
4):如何调用自定义组件中方法
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
另外：支持的事件和属性等 官方提供列表文档
5）：如何获取真实节点
在没添加到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>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);