React 学习记录点
React是一个用于构建用户界面的js库,主要用于构建UI.
特点:
声明式设计:采用声明范式,轻松描述应用。
高效:通过对dom的模拟,最大限度的减少与dom交互。
灵活:可以与已知的库或框架很好的配合。
Jsx:是js的扩展,建议使用。
组件:使得组件更加容易得到复用,能够很好的应用在大项目的开发中。
单向响应的数据流:减少重复代码,比传统数据绑定简单。
React库:
React.min.js-react的核心库
React-dom.min.js 提供与dom相关的功能
Babel.min.js babel将es6转化为es5,就可以在不支持es6的浏览器执行react代码
下载cnpm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm安装模块:
Cnpm install [name]
使用create-react-app构建react开发环境
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
JSX
注意:jsx就是js,一些标识符像class和for 不建议作为xml属性名,作为替代,react DOM使用className和htmlFor来做对应的属性.
for 属性规定 label 与哪个表单元素绑定。
添加自定义属性需要使用 data- 前缀。
Props
可用通过组件类的defaultProps属性为props设置默认值
如
class HelloMessage extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
HelloMessage.defaultProps = {
name: 'Runoob'
};
const element = <HelloMessage/>;
ReactDOM.render(
element,
document.getElementById('example')
);
Props验证
使用props验证使用proptypes,保证我们的应用组件被正确的使用.若传入无效数据,则抛出警告.
如
var title = "菜鸟教程";
// var title = 123;
class MyTitle extends React.Component {
render() {
return (
<h1>Hello, {this.props.title}</h1>
);
}
}
MyTitle.propTypes = {
title: PropTypes.string
};
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
react命名规范
Html元素名以小写字母开头,自定义的react类名使用大写驼峰.
如const element =
除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。
React事件命名使用驼峰写法,如οnclick=”activateLasers()”
阻止默认行为(需要写全)
e.preventDefault();