mufengsm

前端笔记之React（一）初识React&组件&JSX语法

一、React项目起步配置

官网：https://reactjs.org/

文档：https://reactjs.org/docs/hello-world.html

中文：http://react.css88.com/

2013年被开源，2014年在中国彻底火爆。

React是CMD架构，现阶段需要webpack打包

npm install -g [email protected]

必须安装以下三个依赖：

npm install --save-dev babel-core babel-loader babel-preset-env

React采用jsx语法，JSX语法是什么？

就是全球唯一标准的JavaScript和XHTML结合开发最优雅的语法。

浏览器不识别JSX语法，所以需要babel将JSX语法翻译，babel要装一个新的preset

npm install --save-dev babel-preset-react

安装完依赖，修改webpack.congif.js文件中的preset配置：

const path = require('path');
module.exports = {
    entry: "./www/app/main",
    output : {
        path: path.resolve(__dirname, "www/dist"),
        filename : "bundle.js",
    },
    watch:true,
    mode : "development",
    module: {
        rules: [
            {
                test: /\.js?$/, 
                include: [path.resolve(__dirname, "www/app")],
                exclude: [path.resolve(__dirname, "node_modules")], 
                loader : "babel-loader",
                options: { presets: ["env","react"] }, //要翻译的语法 
            }
        ]
    }
}

还要安装react和react-dom包：

npm install --save react react-dom

react是核心库

react-dom提供了与DOM操作的功能库

注意：项目文件夹名字千万不要叫react，很坑。

在index.html上放“挂载点”的盒子：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
head>
<body>
    
body>

html>

app/main.js

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    
        你好，我是react，来自Facebook公司
    ,
    document.getElementById('app')
);

示例代码

运行webpack，直接打开页面：

React是所有react项目的入口

React-dom负责react Element添加到HTML页面的挂载点上

react-dom 这个包提供了你的app最高等级的API，提供了元素的挂载和上树的方法

render() 接收两个参数，第一个参数是react元素，第二个参数是挂载点，用来让react元素进行挂载。

Vue在写实例，而React在写类（构造函数）。

二、组件

组件叫“component”，就是HTML、CSS和JS行为的一个封装。

Vue中的组件是一个.vue文件（其实是普通的JSON对象），React中，组件是一个类（构造函数）。

2.1类式组件

创建App.js文件，这是一个组件，必须按照要求写标准壳，这个壳我们叫rcc壳“react class component”，react的类式组件：

import React from "react";
// 默认暴露一个构造函数（类组件）
export default class App extends React.Component{
    constructor(){
        super();
    }
    render(){
        return 
            我是App组件！
        
    }
}

注意：

1）这个文件的默认暴露就是一个类，这个类的类名必须和文件名相同。
2）文件名和类名的首字母必须大写！React中组件的合法名字首字母必须是大写字母。
3）这个类必须继承自React.Component类，也就是说，rcc壳必须是extends React.Component的写法。
4）这个类必须有构造器constructor，构造器里面必须调用超类的构造器，super()；
5）这个类必须有render函数，render函数中必须return一个jsx对象。而且这个jsx对象必须被唯一的标签包裹。

在main.js主文件中引入组件，然后用自定义标签：

import React from "react";
import ReactDOM from "react-dom";
// 引入组件
import App from "./App.js";

ReactDOM.render(
    
        
        你好，我是react，来自Facebook公司
    ,
    document.getElementById("app")
);

注意：

引入的组件必须路径以./开头

组件要使用，就将这个组件的名字（类名、文件名）进行标签化即可

原理就是这个App类在被实例化。

因为类的名字是大写字母，所以所有的自定义组件标签名字一定是大写字母开头的

在react中，所有以大写字母开头的都是组件，而不是标签。

ReactDOM.render(根jsx，根的挂载点)

ReactDOM只能出现一次，但是非常厉害，可以和HTML结合

jsx，现在一律在js文件夹中开发，并不是传统放html开发

HTML、CSS、JS都被构建到bundle.js文件夹中。

安装以下插件，输入rcc即可快速生成一个组件的语法：

2.2组件可以多层嵌套

main.js文件中引入App.js组件，App组件里面的render函数还可以引入其他组件。

components/Child.js

import React from "react";
export default class Child extends React.Component {
    constructor() {
        super();
    }
    render() {
        return 
            我是Child子组件！
        
    }
}

App父组件中引入：

import React from "react";
import Child from "./components/Child";
// 默认暴露一个构造函数（类组件）
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return 
            我是App组件！
            
            
            
        
    }
}

简单的说：在react中做一个组件：

第一步：创建一个类并暴露

第二步：引入这个类，然后用这个类的类名当做组件的标签（实例化）

2.3函数式组件

一个函数，如果是大写字母开头，并且return一个React Element就是一个组件。

比如App.js组件中，创建一个Child1的函数，这个函数直接返回JSX语法的React Element，此时这个函数就是组件，这个函数直接成为自定义标签，就可以用了。

import React from "react";
import Child from "./components/Child";
// 默认暴露一个构造函数（类组件）

//定义一个自定义的函数组件
const Child1 = ()=> 
    我是Child1函数式组件！


export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return 
            我是App组件！
            
            
        
    }
}

注意：

1）render是一个函数，所以函数里面当然可以定义另一个函数。我们用const来定义一个箭头函数，这个箭头函数的名字，必须首字母大写。react中所有标签名字是首字母大写的，将被判定为我们自己的组件。

2）这个函数里面return了一个jsx对象，注意，不要加引号。初学者会有很多不适。

3）这个组件也是通过“标签”的形式来上树的！

4）函数式组件比类组件差很多功能很多，后面会说。

5）至于什么时候用什么组件、圆括号中能不能传入参数，后面会说。

函数式组件有个缺点，没有state，没有生命周期。

三、JSX语法

所有对React不适应，都是JSX语法造成的，JSX语法淡化了JS和HTML之间的“边界”。

3.1标签必须合理嵌套

错误的：

import React from "react";
import ReactDOM from "react-dom";
// 引入组件
import App from "./App.js"
ReactDOM.render(
    
    
    
  ,
  document.getElementById('app')
);

有多个组件，必须有一个标签包裹所有组件：

import React from "react";
import ReactDOM from "react-dom";
// 引入组件
import App from "./App.js"
ReactDOM.render(
  
     
     
     
  
  ,
  document.getElementById('app')
);

比如table不能直接嵌套tr，必须要有tbody

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return 
             
               
                    
                        1
                        2
                    
                
            
        
    }
}

比如这样也是错误的：

 <p><div>111div>p>

3.2 return不能换行

return后面直接跟着div，不能换行

如果想换行，必须加圆括号包裹。

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            
                我是App组件
            
        )
    }
}

3.3标签必须严格封闭

因为jsx语法被babel-loader翻译（babel-perset-react），所以标签必须严格封闭，否则翻译会报错。

错误的：
<br>
<hr>

正确的：
<br/>
<hr/>

错误的：
<input type="text">

正确的：
<input type="text" />

3.4所有的类名必须用className表示

因为JS中class是关键字，所以类名必须用className

错误的

<div class="box">div>

正确的：

 <div className="box">div>

for要用htmlFor代替：

错误的：
 <label for="">label>
正确的：
 <label htmlFor="">label>

3.5插值基础（重点）

可以在jsx内部，用单个“{}”大括号进行一些js表达式的插入，我们叫做插值。

{} 只能出现在React element中，简化了连字符串工作。

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        const year = 10000;
        const pingfang = (n)=>{
            return n * n
        }
        const arr = [1000,2000,3000,4000]
        return 
            {5000 * 2}年
            {year}年
            {pingfang(100)}年
            {arr.reduce((a,b)=>a + b)}年
            {parseInt(Math.random() * 100)}年
            {3 > 8 ? 10000 : 1}年
        
    }
}

不能出现的语法：

不能定义变量：

<h1>{var a = 100}h1>

不能定义函数：

<h1>{function name(){}}h1>

应该在return之前定义：

render() {
    const pingfang = (n)=> n * n
    return (
        
            我爱你{pingfang(100)}年
        
    )
}

不能出现for循环、if语句、while、do语句：

{for(var i = 0;i < 100;i++){}}

JSX不能出现对象（JSON）。

render() {
    const obj = {"a":100,"b":200}
    return (
        
            {obj}
        
    )
}

此时会报错，如果要在页面显示JSON，应该：

render() {
    const obj = {"a":100,"b":200}
    return (
        
            {JSON.stringify(obj)}
        
    )
}

3.6插值高级

JSX表达式不能出现引号中，比如有一个变量

render() {
    const picUrl = "baby1.jpg"
    return 
        
    
}

正确的应该先写在外层的{}：

render() {
    const picUrl = "baby1";
    const tip = '这是黄晓明老婆';
    const url = 'http://www.baidu.com/'
    return 
        {"images/" + picUrl + ".jpg"} />
        {`images/${picUrl}.jpg`} title={tip} />
        {url}>去百度
    
}

内嵌样式要求这样的语法插值：

style后面直接跟着{{}}，没有引号，{{}}中是JSON，所有的属性名都是驼峰命名法：

<div style={{"width":"100px","height":"100px","backgroundColor":"red"}}>div>

react的程序，可以进行合理的换行

<div style={{
    "width":"100px",
    "height":"100px",
    "backgroundColor":"red"
}}>
div>

3.7 jsx中数组内容会被自动展开（重点）

此时你心里可能有一万个草泥马，这是什么鬼，数组怎么能不加引号呢？因为是JSX语法规定。

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        const arr = [
            牛奶,
            咖啡,
            奶茶,
            可乐
        ]
        return 
             
                 {arr}
             
        
    }
}

只要你在{}放一个数组，此时这个数组不用循环了，就会自动被展开。

所有的数组元素，必须加上key属性，否则报错

注意：

数组有4项，每项都是jsx元素，不需要加引号

每项必须要有不同的key属性，这是react要求的

数组直接{arr}就可以了，也不需要写循环遍历语句。

数据和DOM怎么进行模板的循环：

arr数组中，没有任何的标签，只是数据：此时就要在{}中用map来映射一个新的数组

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        const arr = ["牛奶","咖啡","奶茶","可乐"]
        return 
             
                 {arr.map((item,index)=>{
                    return {item}
                 })}
             
        
    }
}

示例代码

映射出一个表格：

import React from "react";
export default class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        const arr = [
            {"id":1,"name":"小明","age":12,"sex":"男"},
            {"id":2,"name":"小红","age":13,"sex":"女"},
            {"id":3,"name":"小刚","age":14,"sex":"男"},
            {"id":4,"name":"小白","age":15,"sex":"男"}
        ]
        return 
             
                    {
                        arr.map(item=>{
                            return                        })
                    }
                 
                  
                                {item.id}
                                {item.name}
                                {item.age}
                                {item.sex}
                            

             
        
    }
}

示例代码

3.8九九乘法表

学习的是二维数组的展开

我们先有一个套路，准备一个外层的数组，然后外层的循环中push内部数组：

import React from "react";
export default class App extends React.Component {
    //构造函数
    constructor() {
        super();
    }
    render() {
        var arr = [];
        for(var i = 1;i <= 9;i++){
            var temp = []
            for(var j = 1; j <= i; j++) {
                temp.push( {i} * {j} = {i*j} )
            }
            arr.push({temp})
        }
        return (
            
                 
                        {arr}
                    
                    
                 
            
        )
    }
};

实力代码

3.9日历

日历的原理，决定一个日历的画风，有三要素：

这个月第一天是星期几；

这个月有几天；

上个月有几天；

要知道2018年5月5日是星期几：
new Date(2018,5-1,5).getDay()

要知道2018年5月有几天：
new Date(2018,5,0).getDate()

本月有几天，等价于下个月前一天是几号，所以下个月的0号，就是本月的最后一天。

给日历加农历：

npm install --save solarlunar

import React from "react";
import solarLunar from 'solarLunar';
export default class App extends React.Component {
    //构造函数
    constructor() {
        super();
    }
    render() {
        var year = 2018;
        var month = 8; //是人类的月份，而不是计算机的
        //本月第一天是星期几
        var TheMonthFirstDay = new Date(year,month - 1,1).getDay();
        //本月共几天
        var TheMonthDays = new Date(year,month,0).getDate();
        //上个月共几天
        var prevMonthDays = new Date(year,month-1,0).getDate();

        var arr = [];
        
        //上个月的尾巴，本月第一天星期几就有几天上个月的尾巴
        while (TheMonthFirstDay--){
            arr.unshift(prevMonthDays--)
        }

        // 本月放进数组
        var count = 1;
        while(TheMonthDays--){
            arr.push(count++);
        }
        // 下个月的前有多少天，要补齐42天
        var nextCount = 1;
        while ( arr.length != 42){
            arr.push(nextCount++);
        }
        console.log(arr)
        //接下来要用这个一维数组集合JSX语法，展开为二维数组
        const showTable = ()=>{
            var domArr = [];
            for(var i = 0; i < arr.length / 7; i++){
                domArr.push(
                     key={i}>
                        {
                            arr.slice(i * 7, i * 7 + 7).map(item=>{
                                var n = solarLunar.solar2lunar(year, month, item);
                                return 
                                    {item}
                                    

                                    {n.term || n.dayCn}
                                
                            })
                        }
                          
                )
            }
            return domArr;
        }

        return (
            
                 
                        {showTable()}
                     
                     
                         
                             日
                             一
                             二
                             三
                             四
                             五
                             六
                         
                     
                     
                 
            
        )
    }
};

斤斤计较的婚姻到底有多难？白心之岂必有为
很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
芦花鞋一四许叶晗
又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说造命者说
底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
2020-01-25 晴岚85
郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
随笔 | 仙一般的灵气海思沧海
仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
想家爆米花机
也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
【iOS】MVC设计模式 Magnetic_h ios mvc 设计模式 objective-c 学习 ui
MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
OC语言多界面传值五大方式 Magnetic_h ios ui 学习 objective-c 开发语言
前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
一百九十四章. 自相矛盾巨木擎天
唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
C语言宏函数南林yan C语言 c语言
一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
地推话术，如何应对地推过程中家长的拒绝校师学
相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
谢谢你们，爱你们！鹿游儿
昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
C语言如何定义宏函数？小九格物 c语言
在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
理解Gunicorn：Python WSGI服务器的基石范范0825 ipython linux 运维
理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
小丽成长记（四十三）玲玲54321
小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
2021年12月19日，春蕾教育集团团建活动感受——黄晓丹黄错错加油
感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断尐尐呅
结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
瑶池防线谜影梦蝶
冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
爬山后遗症璃绛
爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
《投行人生》读书笔记小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
《策划经理回忆录之二》路基雅虎
话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
jQuery 键盘事件keydown ,keypress ,keyup介绍 107x js jquery keydown keypress keyup
本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() 代码如下复制代码 $('input').keyup(funciton(){
AngularJS中的Promise bijian1013 JavaScript AngularJS Promise
一.Promise Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
c++ 用数组实现栈类 CrazyMizzz 数据结构 C++
#include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
java和c语言的雷同麦田的设计者 java 递归 scaner
软件启动时的初始化代码，加载用户信息2015年5月27号从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点： a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句不会再继续执行。 b、for循环相比于whi
LINUX环境并发服务器的三种实现模型被触发 linux
服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1 循环服务器与并发服务器模型在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
Oracle数据库查询指令肆无忌惮_ oracle数据库
20140920 单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录 -- 查看emp表 desc emp
ext右下角浮动窗口知了ing JavaScript ext
第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
浅谈REDIS数据库的键值设计矮蛋蛋 redis
http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
maven编译可执行jar包 alleni123 maven
http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
人力资源在现代企业中的作用百合不是茶 HR 企业管理
//人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点：工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只知道人力资源是管理企业招聘的当时我被招聘上了，当时给我们培训的人
Linux自启动设置详解 bijian1013 linux
linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。阅读之前建议先看一下附图。本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
Spring Aop Schema实现 bijian1013 java spring AOP
本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
【Gson七】Gson预定义类型适配器 bit1129 gson
Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式， DateTypeAdapter public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。比如：对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。 Spark Streaming的解决方案是累加器，工作原理是，定义
linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
一个文件正在被进程写我想查看这个进程文件一直在增大找不到谁在写使用lsof也没找到这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。幸运的是systemtap的安装包里带了inodewatch.stp，位
java-两种方法求第一个最长的可重复子串 bylijinnan java 算法
import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan java netty
Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的文章里面提到的操作，每一步都能在Netty里面找到对应的代码其中Reactor里面的Acceptor就对应Netty的ServerBo
servelt filter listener 的生命周期 cngolon filter listener servelt 生命周期
1. servlet 当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
jmpopups获取input元素值 ctrain JavaScript
jmpopups 获取弹出层form表单首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。我们必须到jmpopups生成的代码中去查找这个值，$(
vi查找替换命令详解 daizj linux 正则表达式替换查找 vim
一、查找查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找字符串匹配 pattern是需要匹配的字符串，例如： 1: /abc<En
对网站中的js,css文件进行打包 dcj3sjt126com PHP 打包
一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。为什么要进行打包呢，主要目的是为了合理的管理自己的代码。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
在开发Yii 时，在程序中定义了如下方式： if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
linux 文件格式（1） sed工具 eksliang linux linux sed工具 sed工具 linux sed详解
转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介 sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
Android应用程序获取系统权限 gqdy365 android
引用如何使Android应用程序获取系统权限第一个方法简单点，不过需要在Android系统源码的环境下用make来编译： 1. 在应用程序的AndroidManifest.xml中的manifest节点
HoverTree开发日志之验证码 hvt .net C#asp.net hovertree webform
HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式，那么 JSON API 就是你的 anti-bikeshedding 武器。通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。基于 JSON API 的客户端还能够充分利用缓存，
数据结构随记_2 lx.asymmetric 数据结构笔记
第三章栈与队列一．简答题 1. 在一个循环队列中，队首指针指向队首元素的前一个位置。 2.在具有n个单元的循环队列中，队满时共有 n-1 个元素。 3. 向栈中压入元素的操作是先移动栈顶指针&n
Linux下的监控工具dstat 网络接口 linux
1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
C 语言初级入门--二维数组和指针 1140566087 二维数组 c/c++指针
/* 二维数组的定义和二维数组元素的引用二维数组的定义：当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法：类型名数组名[常量表达式1][常量表达式2] 二维数组的引用：引用二维数组元素时必须带有两个下标，引用形式如下：例如： int a[3][4]; 引用：
10点睛Spring4.1-Application Event wiselyman application
10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段应按照如下部分实现bean之间的消息通讯继承ApplicationEvent类实现自己的事件实现继承ApplicationListener接口实现监听事件使用ApplicationContext发布消息

前端笔记之React（一）初识React&组件&JSX语法

一、React项目起步配置

你好，我是react，来自Facebook公司

二、组件

2.1类式组件

我是App组件！

你好，我是react，来自Facebook公司

2.2组件可以多层嵌套

我是Child子组件！

我是App组件！

2.3函数式组件

我是Child1函数式组件！

我是App组件！

三、JSX语法

3.1标签必须合理嵌套

3.2 return不能换行

我是App组件

3.3标签必须严格封闭

3.4所有的类名必须用className表示

3.5插值基础（重点）

{5000 * 2}年

{year}年

{pingfang(100)}年

{arr.reduce((a,b)=>a + b)}年

{parseInt(Math.random() * 100)}年

{3 > 8 ? 10000 : 1}年

我爱你{pingfang(100)}年

{for(var i = 0;i < 100;i++){}}

{obj}

{JSON.stringify(obj)}

3.6插值高级

3.7 jsx中数组内容会被自动展开（重点）

3.8九九乘法表

3.9日历

你可能感兴趣的:(前端笔记之React（一）初识React&组件&JSX语法)