除識react

react 特點：

1.采用組件化模式、聲明式編碼，提高開發效率及組件復用旅

2.在 react Native 中可以使用react 語法進行移動端開發

3.使用虛擬dom + 優秀的dif算法，盡量減少與真實DOM 的交互

jsx語法規則：

在react中使用了jsx（JavaScript XML）語法，它類似于 XML的JS 擴展語法，本質是 React.create Element(component,props,...children)方法的語法糖

1.定義虛擬DOM時，不用寫引號

2.標簽中混入js表達式時要用{ }

3.樣式的類名指定要用className

4.內聯樣式，要用style={{key: value}}的形式去寫

5.只有一個根標簽
6.標簽必須閉合

7.標簽首字母

若小寫字母開頭，則將轉為 html 中同名元素，若html中沒有，則報錯
若大寫字母開頭，react 就會去渲染對應的對賤，若組件為定義，則報錯

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx語法規則</title>
<style>
        .title {
background-color: orange;
width: 200px;
        }
</style>
</head>
<body>
<!-- 準備好一個“容器” -->
<div id="test"></div>

<!-- 引入react核心庫 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于將jsx轉為js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    const myId = 'aTgUiGu'
    const myData = 'HeLlo,rEaCt'

    //1.創建虛擬DOM
    const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color: 'white', fontSize: '29px'}}>        
                {myData.toLowerCase()}</span>
            </h2>
            <h2 className="title" id={myId.toUpperCase()}>
                <span style={{color: 'white', fontSize: '29px'}}>  
                     {myData.toLowerCase()}
                </span>
            </h2>
            <input type="text"/>
        </div>
        )
//2.渲染虛擬DOM到頁面
    ReactDOM.render(VDOM, document.getElementById('test'))

</script>
</body>
</html>

函數組件

//1.創建函數式組件

function MyComponent() {
　　console.log(this); //此處的this是undefined，因為babel編譯后開啟了嚴格模式
　　return <h2>我是用函數定義的組件(適用于【簡單組件】的定義)</h2>;
 }

//2.渲染組件到頁面

ReactDOM.render(<MyComponent />, document.getElementById("test"));

/* 執行了ReactDOM.render(<MyComponent/>.......之后，發生了什么？

　　1.React解析組件標簽，找到了MyComponent組件。

　　2.發現組件是使用函數定義的，隨后調用該函數，將返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。

*/

類式組件

//1.創建類式組件
class MyComponent extends React.Component {
    render() {
        //render是放在哪里的？—— MyComponent的原型對象上，供實例使用。
        //render中的this是誰？—— MyComponent的實例對象 <=> MyComponent組件實例對象。
        console.log("render中的this:", this);
        return (
            <h2>我是用類定義的組件(適用于【復雜組件】的定義)</h2>
        );
    }
}
//2.渲染組件到頁面
ReactDOM.render(<MyComponent />, document.getElementById("test"));
/*
    執行了ReactDOM.render(<MyComponent />.......之后，發生了什么？
    1.React解析組件標簽，找到了MyComponent組件。
    2.發現組件是使用類定義的，隨后new出來該類的實例，并通過該實例調用到原型上的render方法。
    3.將render返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。
*/

state屬性

1. state 狀態必須通過setState進行更新，且更新是一種合并，不是替換

class MyComponent extends React.Component {
    // 簡寫
    // state = { name: '張三' }
    constructor(props) {
        super(props)
        //初始化狀態
        this.state = { name: '張三',flag:false }
        // 簡寫
        this.changeName =this.changeName
        
        // 解決changeName中this指向問題,其實就是改變this指向
        // this.changeName = this.changeName.bind(this)
    }
    // 簡寫
    changeName=()=>{
        const {name,flag} =this.state;
        this.setState({name: flag?'張三':'歷史',flag:!flag})
    }
    // changeName(){
　　　　　// 由于changName是作為 onClick 的回調，所以不是通過實例來調用，而是直接調用
　　　　　// 類中方法默認開啟了局部的嚴格模式，同時應用了babel 所以changName 中的this 就為 undefined
        //const {name,flag} =this.state;

        //this.setState({name: flag?'張三':'歷史',flag:!flag})
    // }
    render() {
        const {name} =this.state
        return (
            <h2 onClick={this.changeName}>{name}</h2>
        );
    }
}
//2.渲染組件到頁面
ReactDOM.render(<MyComponent />, document.getElementById("tetx"));

　props　

1. props 是組件傳過來的值，該值為對象

定義props內屬性必傳/默認值

class MyComponent extends React.Component {
    // 簡寫
    // 靜態成員  類本身，而不是類的實例的成員
    // 對 標簽屬性進行類型，必要性的限制
    // static propTypes={
    //     name:PropTypes.string.isRequired,
    //     sex:PropTypes.string,
    //     age:PropTypes.number
    // }
    // // 指定默認標簽屬性的值
    // static defaultProps={
    //     sex:'未知',
    //     age:18
    // }
    render() {
        console.log(this.props,'this.props')
        const {name,sex,age} =this.props
        return (
            <ul>
                <li>{name}</li>
                <li>{sex}</li>
                <li>{age}</li>
            </ul>
        );
    }
}
MyComponent.propTypes={
    name:PropTypes.string.isRequired,
    sex:PropTypes.string,
    age:PropTypes.number
}
MyComponent.defaultProps={
    sex:'未知',
    age:18
}
//2.渲染組件到頁面
ReactDOM.render(<MyComponent name='張三' />, document.getElementById("tetx"));
ReactDOM.render(<MyComponent name='張三' sex='女' age={19}/>, document.getElementById("tetx2"));
// 報錯
// ReactDOM.render(<MyComponent name={1} sex='女' age={19}/>, document.getElementById("tetx3"));

posted @ 2024-07-26 17:07 瑤開心閱讀(12) 評論(0) 收藏舉報

刷新頁面返回頂部

瑤開心

除識react

公告