React 学习记录点

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();