React学习笔记

本人刚开始学习React，一边学习一边记录。

React简介

React 是一个用于构建用户界面的 JavaScript库。

web应用：React

移动端开发：React Native

虚拟现实技术开发：React VR

React特点

1. 声明式设计
2. 高效
3. 灵活
4. JSX-jsx是JavaScript语法的扩展。React开发不一定要使用jsx，但我们建议使用它。
5. 组件
6. 单向响应的数据流

引入文件

• react.min.js - React 的核心库
• react-dom.min.js - 提供与 DOM 相关的功能
• babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

安装脚手架

npm/cnpm install -g create-react-app
create-react-app myapp

查看版本号

npx --version

React元素渲染

元素是构成react应用的最小单位，它用于描述屏幕上的输出内容。

组件

类组件和函数组件

相比之下，类组件更普遍，如果组件中不涉及业务逻辑，函数组件更好用些。

函数组件

function Header(){
    return <h1>我是头部</h1>;
}

//使用
function App(){
    return(
        <Header/>
    );
}

组件不管定义还是使用都是大写。react中，区分组件和HTML标签的方式就是大小写。大写的以组件方式解析，小写的以HTML标签解析。

类组件

import React, {Component} from 'react' // 解构赋值
// es6类
class App extends Component{
    render (){
        return (
            <div>Hello Wold</div>
        )
    }
}

export default App

图片资源、样式表引用问题

本地图片引入

以路径形式导入，也要有alt属性

import logo from './logo.png'
<img alt="logo" src="{logo}" />

网络图片引入

img 标签的src属性写链接地址就行

本地样式表引入

import style from './style.css'

数据绑定

写在构造函数里。类在被加载的时候，构造函数就会被执行，不需要手动调用。

调试工具

react developer tools

PropTypes类型检查

引入  import PropTypes from 'prop-types'

ref的使用

生命周期