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

wean 发布于2019-08-26 10:34 / 1749人阅读

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

react使用教程 变量的使用

constructor(props) {
super(props);
this.state = {
sliderSwiper: null,
movies: []
};
this.handleStart = this.handleStart.bind(this);
}

if (!baseHref) {
if (isPc) {
window["location"]["href"] = `${location.protocol}//${location.host}/demo/home`;
return;
}
if (!isPc) {
window["location"]["href"] = `${location.protocol}//${location.host}/m/home`;
return;
}
} else {
if (isPc && baseHref === "m") {
window["location"]["href"] = `${location.protocol}//${location.host}/demo/home`;
return;
}
if (!isPc && baseHref === "demo") {
window["location"]["href"] = `${location.protocol}//${location.host}/m/home`;
return;
}
}

父组件向子组件传递参数

this.props.xxx

子向父传递参数

//父组件

//子组件
clickFun(text) {
        this.props.pfn(text)//这个地方把值传递给了props的事件当中
    }

组件判断渲染

const isLoggedIn = this.state.isLoggedIn; 
let button = null; 
if (isLoggedIn) { 
button = ; 
} else { 
button = ; 
} 
return ( 
 
 
{button} 
 ); 
}

组件循环渲染

arr.map((element,index) =>{
    return {index}
})

react生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate  在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。

refs的使用和vue类似


this.refs.myInput.focus();

react 路由的使用

//传参和收参
[react跳转和参数接收](https://blog.csdn.net/qq_24504591/article/details/78973633)

// routers.js
import React, { Component } from "react";
import { HashRouter as Router, Route, Switch, Redirect} from "react-router-dom";
import Home from "./views/Home"
import List from "./views/List";
import Board from "./views/Board";
import Item from "./views/Item";
import Search from "./views/Search";
class Routes extends Component {
render() {
return (













);
}
}
export default Routes;

// 如何跳转






// index.js中
import Routes from "./routes";
ReactDOM.render(, document.getElementById("root"));

react组件种类

静态组件

function HelloMessage(props) { return Hello {props.name}!
; }

2.动态组件

class List extends Component {
render() {
return (



);
}
}

z项目中使用scss

npm i sass-loader node-sass --save-dev

GPU云服务器云服务器前端react 前端框架react 内容安全基础前端基础

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

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

React打怪升级-角色创建

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

Noodles 2019-08-23 11:00 评论0 收藏0
前端修炼之路

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

Jason_Geng 2019-06-26 17:58 评论0 收藏0
前端修炼之路

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

macg0406 2019-08-26 13:29 评论0 收藏0
[打怪升级]小程序评论回复和发贴功能实战（一）

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

YJNldm 2019-08-23 18:37 评论0 收藏0