讓react用起來更駕輕就熟——(React 基礎簡析)
讓react用起來更駕輕就熟系列文章：
react API
import React from 'react'
import ReactDom from 'react-dom'
let el=<h1><span>hello</span><span>wrold</span></h1>
console.log(el)
ReactDom.render(el,window.root);
複製代碼
- 利用babel中的babel-preset-react進行轉譯，調用React.createElement(type,props,children)生成一個虛擬dom節點:
- React.createElement原理簡析:
function createElement(type,props,children){
let obj={};
obj.type=type;
obj.props={};
obj.props.children=null;
for(let key in props){
obj.props[key]=props[key]
}
children.forEach(child => {
let {type,props,subchildren} = child
obj.props.children.push(createElement(type,props,subchildren))
})
return obj
}
複製代碼
function render(vnode,container){
if(typeof vnode ==='string') return container.appendChild(document.createTextNode(vnode));
let{type,props} = vnode;
let tag = document.createElement(type);
for(let key in props){
if(key==='children'){
Array.from(props[key]).forEach(child => {
render(child,tag)
});
}else{
tag.setAttribute(key,props[key]);
}
}
container.appendChild(tag);
}
複製代碼
react組件
函數聲明組件
- 函數式聲明組件:函數返回一個JSX語法的vnode
import React from 'react'
import ReactDom from 'react-dom'
function test(){
let state = {
title:'標題',
context:'內容'
}
return (
<div>
<h3>{state.title}</h3>
<p>{state.context}</p>
</div>
)
}
ReactDom.render(
<div>
{test()}
{test()}
{test()}
</div>,window.root);
複製代碼
- 將上面的函數聲明組件進行必定的包裝
import React from 'react'
import ReactDom from 'react-dom'
function Test(props){
let state={
title:"標題"
}
return (
<div>
<h3>{state.title}</h3>
<p>{props.context}</p>
</div>
)
}
ReactDom.render(
<div>
<Test context='123'></Test>
<Test context='456'></Test>
<Test context='789'></Test>
</div>,window.root);
複製代碼
函數聲明組件存在一些問題:html
- 沒有this
- 沒有狀態，state沒法進行動態更改
- 沒有生命週期
類組件
類組件消除了函數聲明組件的問題，也是如今寫react的正常語法。node
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';
import PropTypes from 'prop-types'; //屬性校驗插件
class Clock extends Component {
state = {
time: new Date().toLocaleString()
}
static propTypes = {
name: PropTypes.string.isRequired //name必填，校驗是否填寫name屬性
}
// 組件掛載後調用
componentDidMount() {
this.timer = setInterval(() => {
// 只會覆蓋之前的屬性相似 Object.assign()
this.setState({ time: new Date().toLocaleString() })
}, 1000)
}
handleClick = () => { //箭頭函數，this用最外層的this，指向當前組件
ReactDOM.unmountComponentAtNode(window.root)
}
// 組件卸載前調用，通常用於解綁事件和方法
componentWillUnmount() {
clearInterval(this.timer)
}
// 默認渲染這個組件會調用render方法
// 只是在上面函數式聲明基礎上包了一層函數，這樣能夠控制其執行時間，添加聲明週期
render() {
let {name} = this.props //通常會解構props
return <div>
{name} <span>{this.state.time}</span>
<button onClick={this.handleClick}>刪除</button>
</div>
}
}
render(<Clock name='test-clock'/>, window.root);
複製代碼
react 生命週期
// React16.3 推出了新的聲明週期
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Counter extends Component {
static defaultProps = {
a: 1
}
state = {
num: 0
}
constructor(props) {
console.log('parent-constructor')
super();
}
// react16.3中標識了這個方法會被廢棄掉
// 後期有須要的話 能夠放在constructor中替代掉
componentWillMount() {
console.log('parent-componentWillMount');
}
// react的性能優化 immutablejs
shouldComponentUpdate(){
console.log('parent-shouldComponentUpdate');
return true
}
componentWillReceiveProps(){
console.log('parent-componentWillReceiveProps');
}
componentWillUpdate(){
console.log('parent-componentWillUpdate');
}
componentDidUpdate() {
console.log('parent-componentDidUpdate');
}
handleClick = () => {
this.setState({ num: this.state.num + 0 });
}
render() {
console.log('parent-render');
return <div>
<button onClick={this.handleClick}>+</button>
{this.state.num}
<ChildCounter n={this.state.num}></ChildCounter>
</div>
}
componentDidMount() {
console.log('parent-didmount');
}
componentWillUnmount() {
console.log('parent-組件卸載')
}
}
class ChildCounter extends Component{
componentWillMount(){
console.log('child-componentWillMount')
}
render(){
console.log('child-render');
return <div>child counter {this.props.n}</div>
}
componentDidMount() {
console.log('child-componentDidMount')
}
shouldComponentUpdate(){
console.log('child-shouldComponentUpdate');
return true
}
componentWillUpdate(){
console.log('child-componentWillUpdate');
}
componentDidUpdate() {
console.log('child-componentDidUpdate');
}
//16.3中這個方法廢棄了
componentWillReceiveProps(){
console.log('child-componentWillReceiveProps');
}
}
ReactDOM.render(<Counter></Counter>, window.root);
複製代碼
- 初次渲染時打印的結果爲:
- 組件狀態更新時打印的結果爲:
- 生命週期分爲初始化生命週期和組件運行生命週期，初始化生命週期爲：constructor->componentWillMount->render->componentDidMount
- 組件運行生命週期爲：(存在props時:componentWillReceiveProps)->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate
- 子組件的生命週期嵌在父組件render後，DidMount和DidUpdate前
- shouldComponentUpdate返回false，組件將不會更新
- 只有componentWillReceiveProps、componentWillMount、componentDidMount中能夠調用setState,不該該在componentWillReceiveProps中調用setState(可是你們仍是這麼用)
受控組件和非受控組件
- 非受控組件：ref操做dom，很方便；能夠和一些地三方庫結合使用
import React,{Component} from 'react';
import {render} from 'react-dom';
class UnControl extends Component{
b = React.createRef(); // 16.3的api React.createRef()
handleClick = () =>{
alert(this.a.value); // 寫法1
alert(this.b.current.value) // 寫法2
}
render(){
return (<div>
<input type="text" id="username" ref={dom=>this.a=dom}/>
<input type="text" id="password" ref={this.b}/>
<button onClick={this.handleClick}>點擊</button>
</div>)
}
}
render(<UnControl></UnControl>,window.root);
複製代碼
- 受控組件：利用e.target和setState來修改狀態並控制dom
import React from 'react';
import ReactDOM from 'react-dom';
class Control extends React.Component{
state = {
a:'hello',
b:'world'
}
changeHandler = (e)=>{
let val = e.target.name
this.setState({
[val]:e.target.value
})
}
render(){
return (
<div>
{this.state.a}
{this.state.b}
<input type="text" name="a" value={this.state.a} onChange={this.changeHandler}/>
<input type="text" name="b" value={this.state.b} onChange={this.changeHandler}/>
</div>
)
}
}
ReactDOM.render(<Control></Control>,window.root);
複製代碼
react數據傳遞
- 逐級傳遞：當組件嵌套的層級不超過3層時，使用這種方式傳遞數據簡單，可是嵌套過深時，會很難管理的問題
//index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Second1 from './Second1';
import Second from './Second';
class App extends Component {
state = {
count:0
}
handleCountChange = (num)=>{
this.setState({count:num})
}
render(){
return(
<div>
<Second count={this.state.count}></Second>
<Second1 count={this.state.count} countChange={this.handleCountChange}></Second1>
</div>
)
}
}
ReactDOM.render(<App></App>, window.root);
複製代碼
//second.js
import React, { Component } from 'react'
export default class Second extends Component {
render() {
let {count} = this.props
return (
<div>{count}</div>
)
}
}
複製代碼
//second1.js
import React, { Component } from 'react'
import Third from './Third';
export default class Second1 extends Component {
render() {
let {count,countChange} = this.props
return (
<Third num={count} numChange={countChange}></Third>
)
}
}
複製代碼
//third.js
import React, { Component } from 'react';
export default class Third extends Component {
handleClick =()=>{
console.log(this.props.num+1);
this.props.numChange(this.props.num+1);
}
render(){
return (
<span onClick={this.handleClick}>+</span>
)
}
}
複製代碼
- 採用context
import React, { Component } from 'react';
import {Provider} from './context';
import ReactDOM from 'react-dom';
import Second1 from './Second1';
import Second from './Second';
class App extends Component {
state = {
count:0
}
handleCountChange = (num)=>{
this.setState({count:num})
}
render(){
return(
// 提供一個contex，上面掛載了全局狀態
<Provider value={{numChange:this.handleCountChange,num:this.state.count}}>
<Second></Second>
<Second1></Second1>
</Provider>
)
}
}
ReactDOM.render(<App></App>, window.root);
複製代碼
// context.js
import React from 'react';
let { Provider, Consumer } = React.createContext(); //react提供的API
export {Provider,Consumer}
複製代碼
// second.js
import React, { Component } from 'react';
import {Consumer} from './context';
export default class Second extends Component {
render() {
return (
<Consumer>
{(value)=>{
return <div>{value.num}</div>
}}
</Consumer>
)
}
}
複製代碼
// second1.js
import React, { Component } from 'react'
import Third from './Third';
export default class Second1 extends Component {
render() {
return (
<Third></Third>
)
}
}
複製代碼
//third.js
import React, { Component } from 'react';
import {Consumer} from './context';
export default class Third extends Component {
render(){
return (<Consumer>
{(value)=>{ //固定語法value就是Provider中的value
return <span onClick={()=>{value.numChange(value.num + 1)}}>+</span>
}}
</Consumer>)
}
}
複製代碼
結語:
我的使用一種框架時總有一種想知道爲啥這樣用的強迫症，否則用框架用的不舒服，不要求從源碼上知道其原理，可是必須得從心理上說服本身。react
相關文章
- 1. 讓react用起來更駕輕就熟——（react-router原理簡析）
- 2. 讓react用起來更駕輕就熟——（react-redux）
- 3. 讓React應用「動」起來
- 4. 零基礎學java的十個駕輕就熟的方法
- 5. 巧妙運用iView Weapp------------小程序更駕輕就熟 （tab nav）
- 6. 《React基礎》React-Redux
- 7. React Hooks 解析（上）：基礎
- 8. React Native未來導航者：react-navigation 使用詳解（基礎篇）
- 9. React Native將來導航者：react-navigation 使用詳解（基礎篇）
- 10. 客戶案例 | 老闆電器：宜搭讓品質管理駕輕就熟
- 更多相關文章...
- • R 語言基礎 - R 語言教程
- • Rust 基礎語法 - RUST 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 讓react用起來更駕輕就熟——（react-router原理簡析）
- 2. 讓react用起來更駕輕就熟——（react-redux）
- 3. 讓React應用「動」起來
- 4. 零基礎學java的十個駕輕就熟的方法
- 5. 巧妙運用iView Weapp------------小程序更駕輕就熟 （tab nav）
- 6. 《React基礎》React-Redux
- 7. React Hooks 解析（上）：基礎
- 8. React Native未來導航者：react-navigation 使用詳解（基礎篇）
- 9. React Native將來導航者：react-navigation 使用詳解（基礎篇）
- 10. 客戶案例 | 老闆電器：宜搭讓品質管理駕輕就熟