資訊專欄INFORMATION COLUMN
摘要：概述這一章講組件，組件才是的核心，也是構(gòu)建的項(xiàng)目中最小的單元。莫買沃洲山，時(shí)人已知處。是使用類的語法來寫，所以很多的思想可以套用到，但是一定要記得，這是，而不是資源源碼
0x000 概述
這一章講組件，組件才是React的核心，也是React構(gòu)建的項(xiàng)目中最小的單元。
0x001 組件上面的章節(jié)有一個(gè)類似下面的栗子：
const App = () => {
return hello
}
ReactDom.render(
App(),
document.getElementById("app")
)
查看瀏覽器
我們可以給他參數(shù)
const App = (name) => {
return hello {name}
}
ReactDom.render(
App("world"),
document.getElementById("app")
)
查看瀏覽器
由此，我們可以自定義一些特別的組件了，比如：
const Article = (title, content) => {
return
{title}
{content}
}
ReactDom.render(
Article("送方外上人","孤云將野鶴，豈向人間住。莫買沃洲山，時(shí)人已知處。"),
document.getElementById("app")
)
查看瀏覽器
0x002 組件的函數(shù)寫法和參數(shù)傳遞組件也可以使用jsx 來寫
const App = () => {
return hello
}
ReactDom.render(
用babel轉(zhuǎn)碼試試：babel --plugins transform-react-jsx index.js:
var App = function App() {
return _react2.default.createElement(
"p",
null,
"hello"
);
};
_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById("app"));
可以看到依舊被轉(zhuǎn)成了createElement函數(shù)，由React.createElement的文檔說明可知，該函數(shù)的第一個(gè)參數(shù)可以是類似div、p之類的html元素，也可以是React Component，而React Component可以是一個(gè)類或者一個(gè)函數(shù)。該栗子中就是函數(shù)
那如果我們要實(shí)現(xiàn)傳參呢，我們可以想想html如何傳參，比如img：
那么寫法和html及其類似的 jsx 呢？可想而知：
ReactDom.render(
我們使用babel轉(zhuǎn)碼看看：babel --plugins transform-react-jsx index.js:
_reactDom2.default.render(_react2.default.createElement(App, { name: "world" }), document.getElementById("app"));
可以看到，被轉(zhuǎn)化成了鍵值對(duì)作為React.createElement的第二個(gè)參數(shù)，那我們應(yīng)該如何訪問這個(gè)參數(shù)呢？
const App = (props) => {
console.log(props)
return hello {props.name}
}
ReactDom.render(
查看瀏覽器：
0x003 組件的類寫法和傳參在之前的文章，也已經(jīng)寫過這么一個(gè)類似的栗子：
class App extends React.Component{
render(){
return hello
}
}
ReactDom.render(
查看瀏覽器：
那如何傳參呢？
class App extends React.Component {
render() {
console.log(this)
return hello
}
}
ReactDom.render(
查看瀏覽器：
我們可以看到，參數(shù)被放在了props中，所以，我們可以像這樣訪問：
class App extends React.Component {
render() {
console.log(this)
return hello {this.props.name}
}
}
ReactDom.render(
查看瀏覽器
0x004 jsx也是js因?yàn)?b>jsx也是js，所以，上面的栗子我們也可以如此改造
class App extends React.Component {
render() {
console.log(this)
return hello {this.props.name}
}
}
ReactDom.render(
使用babel轉(zhuǎn)碼看看：babel --plugins transform-react-jsx index.js:
_reactDom2.default.render(_react2.default.createElement(App, { name: Date() }), document.getElementById("app"));
查看瀏覽器：
0x005 總結(jié)在項(xiàng)目中，我們一般使用類的形式組織整個(gè)項(xiàng)目，但是在某些情況下，使用函數(shù)也是一種不錯(cuò)的選擇。
jsx是使用類html的語法來寫js，所以很多html的思想可以套用到jsx，但是一定要記得，這是js，而不是html
0x006 資源react
transform-react-jsx
源碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97006.html
摘要：概述這一章仔細(xì)講一講的使用栗子簡單使用源碼簡單使用首頁文章我的首頁文章我的效果帶導(dǎo)航激活效果源碼帶導(dǎo)航效果首頁文章我的首頁文章我的效果說明增強(qiáng)版，如果當(dāng)前路由命中，將會(huì)啟用或者。 0x000 概述 這一章仔細(xì)講一講 react-route 的使用栗子 0x001 簡單使用 源碼 import React from react import ReactDom from react-d...
摘要：概述這一章終于大集成了集成源碼效果說明集成主要是用到庫集成源碼效果說明主要用到庫，是針對(duì)庫在環(huán)境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對(duì)應(yīng)關(guān)系集成源碼引入相關(guān)的包和鏈接組件效果說明主要用到庫都是用的接 0x000 概述 這一章終于大集成了 0x001 集成react 源碼 import React from react import ReactDom from rea...
摘要：概述上一章只是稍微了解了一下和相關(guān)的簡單用法，這一章需要講一下組件的生命周期。生命周期的概念這玩意似乎很高大上，其實(shí)就是一個(gè)假概念罷了，直接來實(shí)現(xiàn)一個(gè)類似的吧。 0x000 概述 上一章只是稍微了解了一下state和setState相關(guān)的簡單用法，這一章需要講一下組件的生命周期。 0x001 生命周期的概念 這玩意似乎很高大上，其實(shí)就是一個(gè)假概念罷了，直接來實(shí)現(xiàn)一個(gè)類似的吧。大凡事物從...
0x000 概述 上一章說明了生命周期的概念，本質(zhì)上就是框架在操作組件的過程中暴露出來的一系列鉤子，我們可以選擇我們需要的鉤子，完成我們自己的業(yè)務(wù)，以下講的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同 0x001 組件掛載 以下是組件掛載的過程中觸發(fā)的聲明周期： class App extends React.Component { constructor(pr...
摘要：概述上一章講咯生命周期，這一章就是事件處理咯事件綁定綁定一個(gè)外部函數(shù)按鈕綁定一個(gè)內(nèi)部函數(shù)按鈕解決函數(shù)綁定的問題上面的栗子有個(gè)問題在內(nèi)無法訪問內(nèi)的資源，比如按鈕可以這么解決這個(gè)問題按鈕或者按鈕或者按鈕第三中方式需要支持 0x000 概述 上一章講咯生命周期，這一章就是事件處理咯 0x001 事件綁定 // 綁定一個(gè)外部函數(shù) function handleClick(event) { ...
閱讀 2951·2021-11-25 09:43
閱讀 3327·2021-11-24 09:39
閱讀 2828·2021-09-22 15:59
閱讀 2174·2021-09-13 10:24
閱讀 509·2019-08-29 17:02
閱讀 2098·2019-08-29 13:23
閱讀 3058·2019-08-29 13:06
閱讀 3539·2019-08-29 13:04
