React 基础知识

React准备

React基础知识

React虚拟dom概念, 这是React性能高效的核心算法

React组件,理解什么叫做组件化

  • 组件是React的一个主要特性
  • 组件对于模块化开发的重要性
  • 组件的return函数返回的HTML结点必须是一个
  • 可以给外部使用的组件定义:

    • export default class ComponentHeader extends React.Component{}
  • 入口的定义:

    • ReactDOM.render(,document.getElementById(‘example’));

React多组件嵌套

  • 组件也可以通过参数的形式传递
  • 组件的return 函数返回的HTML结点必须是一个
  • 注意项目命名的规范与文件的结构化

JSX内置表达式

  • {window.username == ” ? ‘默认用户名’ : ‘用户名’ + username}
  • *
<input type="button" value={username} disabled={boolInput} />
  • {/*注释*/}
  • HTML显示可以进行Unicode转码
  • HTML要显示还可以通过

生命周期,纵观整个React的生命周期

  • 生命周期解释图_1
  • 生命周期解释图_2

React属性与事件

State属性,控制着Raect的一切

  • state对于模块属于 自身属性
  • 初始化: this.state = {username:”Parry”};
  • 初始化可以放置在构造函数constructor里
  • 修改state:this.setState({username:”IMOOC”});
  • state的作用域只属于当前的类,不污染其他模块

Props属性

  • props对于模块属于 外来属性
  • 传递参数
<IndexBody userid={123456} username='nick' />
  • 模块中接受参数:
{this.props.userid} {this.props.username}

事件与数据的双向绑定,包含了父子页面之间的参数互传

  • 事件的绑定

    • 注意ES6的语法
      • 可以在构造函数里绑定this –> this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
      • 或者调用时绑定: onClick = {this.changeUserInfo.bind(this,50)}
  • 子页面向父页面传递参数的方法

    • 在子页面中通过调用父页面传递过来的事件 props 进行组件间的参数传递
    • 好好理解这里的onChange事件,为什么不用onBlur

可复用组件,真正让React开发快速,高效的地方

  • Prop 验证

    const propTypes = {id:PropTypes.number.isRequired,url:PropTypes.string.isRequired,text:ProtoTypes.string};
    • 使用方法:BodyIndex.propTypes = {userid:React.PropTypes.number.isRequired};
  • 默认Prop值

    • const defaultProps = {text:’Hello World’};
    • 使用方法: BodyIndex.defaultProps = defaultProps;
  • 传递所有参数的快捷方式

组件的Refs

  • 原生JS获取方法:

    • var myDiv = document.getElementById(‘myDiv’);
    • ReactDOM.findDOMNode(myDiv).style.color = ‘green’;
  • 方法二的定义

  • 方法二的获取: this.refs.myInput
  • refs是访问到组件内部DOM结点唯一可靠的方法
  • refs会自动销毁对子组件的引用–> 析构
  • 不要在render或render之前对refs进行调用
  • 不要滥用refs

独立组件间共享Mixins

React样式

内联样式

  • CSS命名规范:dialog__confirm-button–highlight
  • 是在render函数里定义的

    const styleComponentHeader = {
      header: {
        backgroundColor: "#3c3c3c",
        color: "white", // --> 都要加引号
        "padding-top": "15px", // --> CSS写法要加引号
        paddingBottom: "15px"
      }
      // 还可以定义其他的一些样式
    };
    
  • 注意样式的驼峰写法

  • style={styleComponentHeader.header}
  • 注意class需要更改成className
  • 缺点是动画、伪类(hover)等不能用

内联样式中的表达式

  • paddingBottom:(this.state.miniHeader) ? “3px” : “15px”
  • 注意好好理解这里的state引起样式的即时变化

CSS模块化,学习如何使用require进行样式的引用

  • CSS模块化 webpack.confing.js

{ test: /\.css$/,
        loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]'
      }
  • babel-plugin-react-html-attrs
  • style-loader
  • css-loader
  • 导入: var footerCss = require(“../../css/footer.css”);
  • 使用
  • :local(.normal){color:green;}
  • :global(.btn){color:red;}
  • CSS模块化优点
    • 所有样式都是local的,解决了命名冲突和全局污染问题
    • class名生成规则配置灵活,可以以此来压缩class名
    • 只需引用组件的JS就能搞定组件所有的JS和CSS
    • 依然是CSS,几乎零学习成本

JSX样式与CSS的互转

一个非常好用的样式框架Ant Design样式框架介绍

Ant Design的使用

React Router

Router概念

  • demo代码的逻辑结构

    • 首页
      • 详情页面,主体部分共享于首页
    • 列表页面
    • 其他平级页面
  • 控制页面的层级关系

  • 单页面构建Router控制
  • react-router 实例
  • 底层机制:
    • React:state/props –> Components –> UI
    • Router: location –> Router –> UI

Router参数传递

  • 理解参数传递的重要意义
  • 定义的方法: path=”list/:id”
  • params
  • to
发布了62 篇原创文章 · 获赞 4 · 访问量 9094
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览