react 模組化開發，元件傳值

1 let inum = 10;

2 let str = 'hello,react!';
3 let operson = ;4//
名稱匯出,可以寫多個
5export 
6export ;7//
預設匯出,只能寫乙個
8 export default ;

1 import react from 'react';

2 import reactdom from 'react-dom';3//
名稱匯入
4 import  from './components/mod01';5//
預設匯入
6 import girl from './components/mod01';7//
元件內匯入樣式檔案從而應用樣式
8 import './components/main.css';9//
用名稱匯入，這個名稱成為img標籤的src屬性值
10 import cat from './components/cat.png';
1112
function
13return(14
1516
1718
1920
212223)24
}2，元件傳值    父子傳值
1 import react from 'react';
2 import reactdom from 'react-dom';34
class father extends react.component11}
12//
定義乙個傳給子元件的方法
13     fngetdata=(inum)=>)17}
18render()
2324//
父元件通過props屬性將值傳給子元件
25                     name=
26//
父元件通過props屬性將乙個方法傳給子元件
27                     fngetdata=                
28                 />
2930)31
}32}    
3334
class son extends react.component
40this.props.fngetdata(10) } />
4142)43
}  44}45
46 reactdom.render(,document.getelementbyid('root'));

1

//1   利用父元件來實現兄弟元件傳值
23 import react from 'react';
4 import reactdom from 'react-dom';56
class father extends react.component12}
13//
定義乙個傳給子元件的方法
14     fngetdata =(inum)=>)18}
19render()
2425                     inum = 
26                 />
2728//
父元件通過props屬性將乙個方法傳給子元件
29                     fngetdata=
3031                 />
3233)34
}35}36
class son01 extends react.component
4243)44
}4546}
47class son02 extends react.component />
5354)55
}56}57 reactdom.render(,document.getelementbyid('root'));

1

//2    利用eventemitter類來實現兄弟傳值
23 import react from 'react';
4 import reactdom from 'react-dom';
5 import  from 'events'
67 let bus = new
eventemitter();89
class father extends react.component19}
20class son01 extends react.component)24}
25render() />
3031)32
}33}34
class son02 extends react.component40}
41componentdidmount())
47})48}
49render()
5455)56
}57}58 reactdom.render(,document.getelementbyid('root'));

模組化開發

講模組化開發之前，我們先了解一下 傳統開發模式 是什麼？比如說a所在的公司在做乙個專案，公司安排a跟b還有c三個人一起協同開發，a負責一部分功能塊，b負責另一部分功能塊，把專案的功能分成一塊一塊，這適用於多人協作開發，每個人負責不同的功能塊，當然，這其中有人是負責整合的，有人是負責開發公共功能塊的等...

模組化開發

commonjs規範 同步模式載入模組，導致效率低 node.js環境 乙個檔案就是乙個模組 每個模組都有單獨地作用域 通過module.exports匯出成員 通過require函式載入模組 amd asynchronous module definition 規範 使用相對複雜 模組js檔案請求...

模組化開發

寫在前面 面試時常被問到，你知道什麼是模組化開發嗎？模組化開發能帶來什麼好處？下面的內容可以幫助你簡單了解什麼是模組化開發，從對它模糊的印象中看到一些清晰的輪廓，幫助你了解模組化開發的現狀，以對選擇哪種模組化開發有個選擇的方向。目錄 什麼是模組化開發 模組化開發的意義 模組化開發的好處 1 避免變數...