內容
intro
install
page setup
react elements
reactdom
react component
react factories
names abstract:
react.createelement(),reactdom.render(),react.component,reactdomfactories
可用於建立原生的移動應用，瀏覽器只是 react 執行環境之一
主要優點：可將資料與ui元素隔離
至少在html引入以下兩庫才可使用
// facebook cdn// facebook cdn
react.createelement("h1", , "baked salmon")createelement()方法實際建立了:
,
// data which used to build a dom element
props: object ,
}
h1之後可通過render()將其設為子元素
var dish = react.createelement("h1", null, "baked salmon")
reactdom.render(dish, document.getelementbyid('react-container'))
render()方法渲染時會在現有元素上更新，追加新增元素，而不是重新渲染一遍，這使得 react 高效
react 通過props.children渲染子元素
建立乙個列表：
var step = react.createelement("ul", null,
react.createelement("li", null, "1lb salmon"),
react.createelement("li", null, "1 cup pine nuts"),
)
var steps = ['step1', 'step2', 'step3']
var s = react.createelement(
"ul",
,steps.map((step, i) => react.createelement("li", , step))
)reactdom.render(s, document.getelementbyid('react-container'))
key，否則會控制台警告，key可幫助 react 高效更新元素
⚠️ 由於class是 js 中的保留關鍵字，因此用classname
----- 可復用的，dom結構相同的零部件
react.component是乙個重要抽象類，相容es6，可用於建立元件
建立乙個菜品所需食材的無序列表：
class ingredientslist extends react.component ,
this.props.items.map(
(ingredient, i) => react.createelement("li", , ingredient)))
}}
map裡的箭頭函式封裝為renderlistitem,
class ingredientslist extends react.component , ingredient)
}render() ,
this.props.items.map(this.renderlistitem))}
}
const ingredientslist = props =>
react.createelement("ul", ,
props.items.map(
(ingredient, i) => react.createelement("li", , ingredient)))
const items = [
"1 lb salmon",
"1 cup pine nuts",
"2 cups butter lettuce",
"1 yellow squash",
"1/2 cup olive oil",
"3 cloves of garlic"
]reactdom.render(
react.createelement(ingredientslist, , null),
document.getelementbyid("react-container")
)
reactdomfactories⚠️ 也可直接引入其庫
const el = react.dom.h1(null, "baked salmon") // react
const el = reactdomfactories.h1(null, "baked salmon") // react-dom-factories
reactdom.render(el, document.getelementbyid('react-container'))
createfactory()顯式建立工廠類
const ingredientlist = () =>
react.createelement("ul", null,
items.map((ingredient, i) =>
react.createelement("li", , ingredient)))
const ingredients = react.createfactory(ingredientlist)
reactdom.render(
ingredients(),
document.getelementbyid('react-container')
)
this is end -------------------------本文獻給頭號粉絲@mmmay 及 13k 殭屍粉大軍........文章若有誤人子弟之處，望及時指正，必有重謝！
React 封裝路由
封裝路由import movie from views movie import cinema from views cinema import mine from views mine import city from views city import search from views sea...
react專案的axios封裝
分享乙個 react axios 的元件封裝 請求 帶token放請求頭 import axios from axios import qs from qs import from antd import cookies from js cookie export default function ...
react路由使用以及封裝
yarn add react router dom or,if you re not using yarn npm install react router dom 路由對應官網 在目錄container下新建兩個檔案，home.js和detail.js import react from reac...