喽了一眼阮一峰老师的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') );
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
