溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了React的知識點有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React的知識點有哪些文章都會有所收獲，下面我們一起來看看吧。
組件的數據掛載方式，屬性(props)props是正常是外部傳入的，組件內部也可以通過一些方式來初始化的設置，屬性不能被組件自己更改，但是你可以通過父組件主動重新渲染的方式來傳入新的 props
屬性是描述性質、特點的，組件自己不能隨意更改。
之前的組件代碼里面有props的簡單使用，總的來說，在使用一個組件的時候，可以把參數放在標簽的屬性當中，所有的屬性都會作為組件 props 對象的鍵值。通過箭頭函數創建的組件，需要通過函數的參數來接收props:
import React, { Component, Fragment } from 'react'import ReactDOM from 'react-dom'class Title extends Component {
render () {
return (
<h2>歡迎進入{this.props.name}的世界</h2>
)
}}const Content = (props) => {
return (
<p>{props.name}是一個構建UI的庫</p>
)}class App extends Component {
render () {
return (
<Fragment>
<Title name="React" />
<Content name="React.js" />
</Fragment>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
import React, { Component, Fragment } from 'react'import ReactDOM from 'react-dom'class Title extends Component {
// 使用類創建的組件，直接在這里寫static方法，創建defaultProps static defaultProps = {
name: 'React'
}
render () {
return (
<h2>歡迎進入{this.props.name}的世界</h2>
)
}}const Content = (props) => {
return (
<p>{props.name}是一個構建UI的庫</p>
)}// 使用箭頭函數創建的組件，需要在這個組件上直接寫defaultProps屬性Content.defaultProps = {
name: 'React.js'}class App extends Component {
render () {
return (
<Fragment>
{/* 由于設置了defaultProps， 不傳props也能正常運行，如果傳遞了就會覆蓋defaultProps的值 */}
<Title />
<Content />
</Fragment>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
我們知道使用組件的時候，可以嵌套。要在自定義組件的使用嵌套結構，就需要使用 props.children 。在實際的工作當中，我們幾乎每天都需要用這種方式來編寫組件。
import React, { Component, Fragment } from 'react'import ReactDOM from 'react-dom'class Title extends Component {
render () {
return (
<h2>歡迎進入{this.props.children}的世界</h2>
)
}}const Content = (props) => {
return (
<p>{props.children}</p>
)}class App extends Component {
render () {
return (
<Fragment>
<Title>React</Title>
<Content><i>React.js</i>是一個構建UI的庫</Content>
</Fragment>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
React其實是為了構建大型應用程序而生, 在一個大型應用中，根本不知道別人使用你寫的組件的時候會傳入什么樣的參數，有可能會造成應用程序運行不了，但是不報錯。為了解決這個問題，React提供了一種機制，讓寫組件的人可以給組件的props設定參數檢查，需要安裝和使用prop-types:
$ npm i prop-types -S
狀態就是組件描述某種顯示情況的數據，由組件自己設置和更改，也就是說由組件自己維護，使用狀態的目的就是為了在不同的狀態下使組件的顯示不同(自己管理)
第一種方式
import React, { Component } from 'react'import ReactDOM from 'react-dom'class App extends Component {
state = {
name: 'React',
isLiked: false
}
render () {
return (
<div>
<h2>歡迎來到{this.state.name}的世界</h2>
<button>
{
this.state.isLiked ? '??取消' : ' 收藏'
}
</button>
</div>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
另一種方式(推薦)
import React, { Component } from 'react'import ReactDOM from 'react-dom'class App extends Component {
constructor() {
super()
this.state = {
name: 'React',
isLiked: false
}
}
render () {
return (
<div>
<h2>歡迎來到{this.state.name}的世界</h2>
<button>
{
this.state.isLiked ? '??取消' : ' 收藏'
}
</button>
</div>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
this.props和this.state是純js對象,在vue中，data屬性是利用Object.defineProperty處理過的，更改data的數據的時候會觸發數據的getter和setter，但是React中沒有做這樣的處理，如果直接更改的話，react是無法得知的，所以，需要使用特殊的更改狀態的方法setState。
isLiked 存放在實例的 state 對象當中，組件的 render 函數內，會根據組件的 state 的中的isLiked不同顯示“取消”或“收藏”內容。下面給 button 加上了點擊的事件監聽。
import React, { Component } from 'react'import ReactDOM from 'react-dom'class App extends Component {
constructor() {
super()
this.state = {
name: 'React',
isLiked: false
}
}
handleBtnClick = () => {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (
<div>
<h2>歡迎來到{this.state.name}的世界</h2>
<button onClick={this.handleBtnClick}>
{
this.state.isLiked ? '??取消' : ' 收藏'
}
</button>
</div>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
setState有兩個參數
第一個參數可以是對象，也可以是方法return一個對象，我們把這個參數叫做updater
· 參數是對象
this.setState({
isLiked: !this.state.isLiked})
· 參數是方法
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
})
注意的是這個方法接收兩個參數，第一個是上一次的state, 第二個是props
setState是異步的，所以想要獲取到最新的state，沒有辦法獲取，就有了第二個參數，這是一個可選的回調函數
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}}, () => {
console.log('回調里的',this.state.isLiked)})console.log('setState外部的',this.state.isLiked)
相似點：
都是純js對象，都會觸發render更新，都具有確定性（狀態/屬性相同，結果相同）
不同點：
00001. 屬性能從父組件獲取，狀態不能
00002. 屬性可以由父組件修改，狀態不能
00003. 屬性能在內部設置默認值，狀態也可以
00004. 屬性不在組件內部修改，狀態要改
00005. 屬性能設置子組件初始值，狀態不可以
00006. 屬性可以修改子組件的值，狀態不可以
state 的主要作用是用于組件保存、控制、修改自己的可變狀態。state 在組件內部初始化，可以被組件自身修改，而外部不能訪問也不能修改。你可以認為 state 是一個局部的、只能被組件自身控制的數據源。state 中狀態可以通過 this.setState方法進行更新，setState 會導致組件的重新渲染。
props 的主要作用是讓使用該組件的父組件可以傳入參數來配置該組件。它是外部傳進來的配置參數，組件內部無法控制也無法修改。除非外部組件主動傳入新的 props，否則組件的 props永遠保持不變。
如果搞不清 state 和 props 的使用場景，記住一個簡單的規則：盡量少地用 state，多用 props。
沒有 state 的組件叫無狀態組件（stateless component），設置了 state 的叫做有狀態組件（stateful component）。因為狀態會帶來管理的復雜性，我們盡量多地寫無狀態組件，盡量少地寫有狀態的組件。這樣會降低代碼維護的難度，也會在一定程度上增強組件的可復用性。
##狀態提升
如果有多個組件共享一個數據，把這個數據放到共同的父級組件中來管理
React組件的數據渲染是否被調用者傳遞的props完全控制，控制則為受控組件，否則非受控組件。
· 條件渲染
{
condition ? '??取消' : ' 收藏'}
· 列表渲染
// 數據const people = [{
id: 1,
name: 'Leo',
age: 35}, {
id: 2,
name: 'XiaoMing',
age: 16}]// 渲染列表{
people.map(person => {
return (
<dl key={person.id}>
<dt>{person.name}</dt>
<dd>age: {person.age}</dd>
</dl>
)
})}
React的高效依賴于所謂的 Virtual-DOM，盡量不碰 DOM。對于列表元素來說會有一個問題：元素可能會在一個列表中改變位置。要實現這個操作，只需要交換一下 DOM 位置就行了，但是React并不知道其實我們只是改變了元素的位置，所以它會重新渲染后面兩個元素（再執行 Virtual-DOM ），這樣會大大增加 DOM 操作。但如果給每個元素加上唯一的標識，React 就可以知道這兩個元素只是交換了位置，這個標識就是key，這個 key 必須是每個元素唯一的標識
· dangerouslySetHTML
對于富文本創建的內容，后臺拿到的數據是這樣的：
content = "<p>React.js是一個構建UI的庫</p>"
處于安全的原因，React當中所有表達式的內容會被轉義，如果直接輸入，標簽會被當成文本。這時候就需要使用dangerouslySetHTML屬性，它允許我們動態設置innerHTML
import React, { Component } from 'react'import ReactDOM from 'react-dom'class App extends Component {
constructor() {
super()
this.state = {
content : "<p>React.js是一個構建UI的庫</p>"
}
}
render () {
return (
<div
// 注意這里是兩個下下劃線 __html dangerouslySetInnerHTML={{__html: this.state.content}}
/>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
采用on+事件名的方式來綁定一個事件，注意，這里和原生的事件是有區別的，原生的事件全是小寫onclick, React里的事件是駝峰onClick，React的事件并不是原生事件，而是合成事件。
· 直接在render里寫行內的箭頭函數(不推薦)
· 在組件內使用箭頭函數定義一個方法(推薦)
· 直接在組件內定義一個非箭頭函數的方法，然后在render里直接使用>(不推薦)
· 直接在組件內定義一個非箭頭函數的方法，然后在constructor里bind(this)(推薦)
和普通瀏覽器一樣，事件handler會被自動傳入一個 event 對象，這個對象和普通的瀏覽器 event 對象所包含的方法和屬性都基本一致。不同的是 React中的 event 對象并不是瀏覽器提供的，而是它自己內部所構建的。它同樣具有event.stopPropagation、event.preventDefault這種常用的方法
· 在render里調用方法的地方外面包一層箭頭函數
· 在render里通過this.handleEvent.bind(this, 參數)這樣的方式來傳遞
· 通過event傳遞
· 比較推薦的是做一個子組件, 在父組件中定義方法，通過props傳遞到子組件中，然后在子組件件通過this.props.method來調用
##處理用戶輸入
import React, { Component } from 'react'import ReactDOM from 'react-dom'class App extends Component {
constructor() {
super()
this.state = {
xing: '',
ming: ''
}
}
handleInputChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render () {
const {
xing,
ming
} = this.state
return (
<div>
<label>
<span>姓:</span>
<input
type="text"
name="xing"
value={xing}
onChange={this.handleInputChange}
/>
</label>
<label>
<span>名:</span>
<input
type="text"
name="ming"
value={ming}
onChange={this.handleInputChange}
/>
</label>
<p>歡迎您: {xing}{ming}</p>
</div>
)
}}ReactDOM.render(
<App/>,
document.getElementById('root'))
關于“React的知識點有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“React的知識點有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
