资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/[前端打怪升级--LV.1] react的基础内容

[前端打怪升级--LV.1] react的基础内容

wean / 1807人阅读

摘要：在第一次渲染后调用，只在客户端。返回一个布尔值。在初始化时或者使用时不被调用。在组件接收到新的或者但还没有时被调用。在组件完成更新后立即调用。在组件从中移除之前立刻被调用。

react使用教程 变量的使用 
</>复制代码 
  1. constructor(props) {
  2. super(props);
  3. this.state = {
  4. sliderSwiper: null,
  5. movies: []
  6. };
  7. this.handleStart = this.handleStart.bind(this);
  8. }
  9. if (!baseHref) {
  10. if (isPc) {
  11. window["location"]["href"] = `${location.protocol}//${location.host}/demo/home`;
  12. return;
  13. }
  14. if (!isPc) {
  15. window["location"]["href"] = `${location.protocol}//${location.host}/m/home`;
  16. return;
  17. }
  18. } else {
  19. if (isPc && baseHref === "m") {
  20. window["location"]["href"] = `${location.protocol}//${location.host}/demo/home`;
  21. return;
  22. }
  23. if (!isPc && baseHref === "demo") {
  24. window["location"]["href"] = `${location.protocol}//${location.host}/m/home`;
  25. return;
  26. }
  27. }
父组件向子组件传递参数 
</>复制代码 
  1. this.props.xxx
子向父传递参数 
</>复制代码 
  1. //父组件
  3. //子组件
  4. clickFun(text) {
  5.         this.props.pfn(text)//这个地方把值传递给了props的事件当中
  6.     }
  8.                     click me
  9.  
组件判断渲染 
</>复制代码 
  1. const isLoggedIn = this.state.isLoggedIn; 
  2. let button = null; 
  3. if (isLoggedIn) { 
  4. button = ; 
  5. } else { 
  6. button = ; 
  7. } 
  8. return ( 
  9.  
  10.  
  11. {button} 
  12.  ); 
  13. }
组件循环渲染 
</>复制代码 
  1. arr.map((element,index) =>{
  2.     return 
    {index}
  3. })
react生命周期 
</>复制代码 
  1. componentWillMount 在渲染前调用,在客户端也在服务端。
    componentDidMount : 在第一次渲染后调用，只在客户端。
    componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    componentDidUpdate  在组件完成更新后立即调用。在初始化时不会被调用。
    componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。
refs的使用 和vue类似 
</>复制代码 
  2. this.refs.myInput.focus();
react 路由的使用 
</>复制代码 
  1. //传参和收参
  2. [react跳转和参数接收](https://blog.csdn.net/qq_24504591/article/details/78973633)
  3. // routers.js
  4. import React, { Component } from "react";
  5. import { HashRouter as Router, Route, Switch, Redirect} from "react-router-dom";
  6. import Home from "./views/Home"
  7. import List from "./views/List";
  8. import Board from "./views/Board";
  9. import Item from "./views/Item";
  10. import Search from "./views/Search";
  11. class Routes extends Component {
  12. render() {
  13. return (
  27. );
  28. }
  29. }
  30. export default Routes;
  31. // 如何跳转
  35. // index.js中
  36. import Routes from "./routes";
  37. ReactDOM.render(, document.getElementById("root"));
react组件种类

静态组件

</>复制代码 
  1. function HelloMessage(props) { return 
    Hello {props.name}!
    ; }

2.动态组件

</>复制代码 
  1. class List extends Component {
  2. render() {
  3. return (
  7. );
  8. }
  9. }
z项目中使用scss 
</>复制代码 
  1. npm i sass-loader node-sass --save-dev
GPU云服务器 云服务器 前端react 前端框架react 内容安全基础 前端基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106401.html

相关文章

  • React打怪升级-角色创建

    摘要：序年，立秋，打算入坑，知道这又是一项艰巨的任务。箭头函数对象解构类拓展运算符升级地图指南学习曲线较为陡峭的需要一个明确的指南，这张来自一个被了的，要好好看一看。开发简书项目从零基础入门到实战接下来，领任务，去升级吧 序 2018年，立秋，打算入坑React，知道这又是一项艰巨的任务。在框架选择时，确实纠结了很长时间，而为什么决定入坑React，是我看到一片文章。也决定把自己的基础知识通...

    Noodles 评论0 收藏0

  • 前端修炼之路

    摘要：一步，两步，三步四步五步，就这样到达了人生的巅峰传统前端生态初级不使用打包中间处理工具，手工处理图片等资源掌握以下知识点基础结构，基础样式，基础语法框架，系列插件框架，等基础插件，等其他移动端适配，浏览器兼容，浏览器调试等恭喜完成新手村修 一步，两步，三步四步五步，就这样到达了人生的巅峰~ 传统前端生态-初级 不使用打包、中间处理工具，手工处理js、css、图片等资源 掌握以下知识点：...

    Jason_Geng 评论0 收藏0

  • 前端修炼之路

    摘要：一步，两步，三步四步五步，就这样到达了人生的巅峰传统前端生态初级不使用打包中间处理工具，手工处理图片等资源掌握以下知识点基础结构，基础样式，基础语法框架，系列插件框架，等基础插件，等其他移动端适配，浏览器兼容，浏览器调试等恭喜完成新手村修 一步，两步，三步四步五步，就这样到达了人生的巅峰~ 传统前端生态-初级 不使用打包、中间处理工具，手工处理js、css、图片等资源 掌握以下知识点：...

    macg0406 评论0 收藏0

  • [打怪升级]小程序评论回复和发贴功能实战（一）

    摘要：往期回顾打怪升级小程序评论回复和发贴功能实战二填坑手册小程序生成海报一拆弹时刻小程序生成海报二填坑手册小程序目录结构和组件使用心得 showImg(https://segmentfault.com/img/remote/1460000019733090?w=818&h=516); 在学习成长的过程中，常常会遇到一些自己从未接触的事物，这就好比是打怪升级，每次打倒一只怪，都会获得经验，让...

    YJNldm 评论0 收藏0

发表评论

登陆后可评论

0条评论

wean

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<