zoukankan      html  css  js  c++  java
  • 学习react基础知识(二)

    react 脚手架工具

    npm install create-react-app -g create-react-app -Vcreate-react-app 项目名字 通过脚手架工具创建项目

    注意:部分插件的版本依赖问题 需要打开旺旺大礼包npm run eject 打开旺旺大礼包之前执行一次本地git仓库的提交

    npm start 跳转到实例界面项目就算创建ok

    基本指令

    npm start 本地开发环境运行npm run eject 解开插件包npm run build 编译打包

    基本目录结构

    build 打包后的文件目录config 项目的配置目录script js启动脚本src 项目的源码目录.gitignore git 上传的忽略文件package.josn

    组件的创建

    15 createClass 方法16 通过class关键字或者函数来创建组件

    类组件函数组件

    类组件 (功能组件,智能组件,有状态组件) 用class 关键字创建的组件 有state值 能修改state值 能写jsx 有生命周期函数组件 (ui组件,木偶组件,傻瓜组件,无状态组件) 用函数创建的组件 没有state 就不能修改数据 没有生命周期 只能写jsx 只能接受props 渲染界面

    受控组件 非受控组件

    不是一种新的组件而是获取表单数据的2中方式

    非受控组件 通过ref 获取表单数据受控组件 将表单value 和state 里的数据进行关联

    react developer tool

    谷歌浏览器插件 使用方式类似vue开发者工具

    Fragment

    可以作为跟组件使用并且不会被渲染

    生命周期

    1. 创建初始化getDefaultProps 初始化porpsgetInitialState 初始化state 15.6 的生命周期 在16版本本取消 用 构造函数代替

    2. 挂载(废弃)componentWillmount 挂载之前componentDidMount 挂载结束

    3. 更新 (废弃)componentWillReceiveProps props发生改变的时候触发shouldComponentUpdate 数据的改变是否应该引起页面的更新(废弃)componentWillUpdate 组件将要更新componentDidUpdate 组件更新完毕

    4. 卸载销毁 擦屁股解决遗憾的操作componentWillUnMount

  • 相关阅读:
    HTTP协议 学习笔记一
    web发展历史
    Easydarwin加FFMPEG实现HLS流视频点播
    C# Socket异步实现消息发送--附带源码
    C# Activex调用USB摄像头--附带源码
    C# listbox DataSource数据绑定--一年半以前的bug
    ASP.NET MVC WebAPI实现文件批量上传
    ASP.NET MVC使用SignalR统计在线用户人数
    Chart.js Y轴数据以百分比展示
    Java获取字符串信息
  • 原文地址:https://www.cnblogs.com/Frank000000/p/12547305.html
Copyright © 2011-2022 走看看