React之第一次記錄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
    <script src="node_modules/prop-types/prop_types.min.js"></script>
</head>
<body>
    <div id="domReact">

    </div>
    <script type="text/babel">
        // 三目運算符
        // let phone=4999;
        // let myDom=(
        //     <div>當前手機價格爲{phone}------{phone>4000?"很貴":"很便宜"}</div>
        // )

        //  var arr=[
        //      <p>新聞列表1</p>,
        //      <p>新聞列表2</p>,
        //      <p>新聞列表3</p>,
        //      <p>新聞列表4</p>,
        //      <p>新聞列表5</p>
        //  ]
        //  let myDom=(
        //      <div>{arr}</div>
        //  )

        // let text="點我";
        // let linkUrl="http://www.baidu.com"
        // let myDom=<a href={linkUrl}>{text}</a>

        // let moStyle={color:"red"}
        // let myDom=<p style={moStyle}>修改樣式</p>

        //列表渲染
        // let arr=["study","play","sleep"];
        // let myDom=arr.map((item,index)=>{
        //     return(
        //         <p key={index}>{item}</p>
        //     )
        // })
        // let newArr=[];
        // for(let i in arr){
        //     newArr.push(<p key={i} onClick={()=>{alert("你好")}}>{arr[innerWidth]}</p>)
        // }

        //對象遍歷
        // var obj={name:"古湖",age:"18",phone:"156322"}
        // Object.keys(obj).map((v,i)=>{
        //     return (
        //         <p>{v}</p>,
        //         <p>{obj[v]}</p>
        //     )
        // })

        //無狀態組件的創建方式
        // function first(){
        //     return (
        //         <div>無狀態組件</div>
        //     )
        // }
        // let myDom=<div>
        //          <first/><first/>
        //     </div>

        //父子組件
        // function MyComA(){
        //     return(
        //         <h1>我是第一個組件</h1>
        //     )
        // }
        // function MyComB(){
        //     return (
        //         <h1>我是第二個組件</h1>
        //     )
        // }
        // function MyComC(){
        //     return (
        //         <h1>我是第三個組件</h1>
        //     )
        // }
        // function MyComD(){
        //     return (
        //         <h1>我是第四個組件</h1>
        //     )
        // }
        // function Com(){
        //     return (
        //         <div>
        //             <MyComA/>
        //             <MyComB/>
        //             <MyComC/>
        //             <MyComD/>
        //             </div>
        //     )
        // }

        //類組件,組件名首字母大寫
        // class MyCom extends React.Component{
        //     render(){
        //         return(
        //             <div>類組件</div>
        //         )
        //     }
        // }
        // let myDom=<MyCom/>

        //props是一個重要組件的屬性， 組件對外的接口 我們可以從組件的外部向組件的內部進行數據的傳遞
        //也可以完成父子組件數據的傳遞，但是無論是無狀態組件還是類組件，我們都不能更改自身的props
        // function Com(props){
        //     return (
        //         <div>我是無狀態組件：{props.text}</div>
        //     )
        // }
        // class Com extends React.Component{
        //     render(){
        //         return (
        //             <div>我是類組件{this.props.num}</div>
        //         )
        //     }
        // }

        //無狀態的props驗證和默認值(defaultProps)
        // function Com(props){
        //     return (
        //         <div>{props.name}</div>
        //     )
        // }
        // Com.defaultProps={
        //     name:"我是默認值"
        // }

        //props驗證（驗證傳進來的數據是否符合我們期望的類型或者要求，上線模式請求取消props驗證）
        //1.引用prop-types庫   npm install --save prop-types
        // Com.propTypees={
        //     name:PropTypes.number,
        //     age:PropTypes.isRequired
        // }

        //如何渲染外部數據
        // let MyCom=(props)=>{
        //     return(
        //         <div>我是子組件
        //             {
        //                 props.arr.map((v,i)={
        //                     return <p></p>
        //                 })
        //             }
        //         </div>
        //     )
        // }
        // let Com=()=>{
        //     return (
        //         <div>
        //             我是父組件
        //             <MyCom arr={dataArr}/>
        //         </div>
        //     )
        // }

        //state狀態
        //state狀態和props的區別
        //props是組件對外的接口 state是組件對內的接口
        //上層組件可以通過下層組件中props來進行數據的傳遞，因此props就是組件對外的接口，組件除了上層傳遞的數據之外，他自身也需要數據的管理，對內管理數據的屬性就是state
        // 主要區別
        // 1.state是可變的
        // 2.props對於當前頁面的組件來說，只是數據之間的傳遞
        //在ES6中不管類寫不寫constructor 在new實例的時候都會不上constructor
        //但是如果寫了，之後都必須在其中協商super()就是指向父類的構造方法
        // class Com extends React.Component{
        //     constructor(props){
        //             super(props)
        //             this.state={
        //                 name:"嘻嘻",
        //                 age:"18"
        //             }
        //         }
        //     render(){
        //         return (
        //             //this.setState({keys:newValue})
        //             <button οnclick={()=>{this.setState({name:"哈哈"})}}></button>

        //             <div>{this.state.name}</div>
        //         )
        //     }
        // }

        //state進階
        //this.setState()是異步的
        // class Com extends React.Component{
        //     constructor(props){
        //         super(props)
        //         this.state={
        //             name:"嘻嘻"
        //         }
        //     }
        //     function=()=>{
        //         this.setState({
        //             name:"哈哈"
        //         })
        //     }
        //     render(){
        //         return(
        //             <div>
        //                 <button οnclick={this.function}></button>
        //                 {this.state.name}
        //             </div>
        //         )
        //     }
        // }



        //轉發refs react當中提供了一個ref的數據（不能再無狀態組件當中來進行使用，因爲無狀態組件沒有實例）
        //react提供的三種方式進行ref的使用
        // 1.字符串的方式
        // 2.回調函數
        // 3.React.createRef()(react16.3提供的一種新方式) 使用ref的current屬性拿到這個節點
        // class Com extends React.Component{
        //     constructor(props){
        //         super(props)
        //         this.myRef=React.reactRef();
        //     }
        //     func=()=>{
        //         console.log(this.refs.demoInput.value)
        //         console.log(this.textinput.value)
        //         console.log(this.myRef.current.value)
        //     }
        //     render(){
        //         return (
        //             <div>
        //                 我是組件
        //                 <input type="text" ref="demoInput" placeholder="請輸入"/>
        //                 <input type="text" ref={(input)=>{this.textinput=input}} placeholder="請輸入"/>
        //                 <input type="text" ref={this.myRef} placeholder="請輸入"/>
        //                 <button onClick={this.func}>點我得到輸入框值</button>
        //             </div>
        //         )
        //     }
        // }

        //react事件處理 react綁定事件採用小駝峯命名法，在綁定函數的時候不能加（）--函數立即執行
        // 1.修改this指向
        // 2.bind方式原定綁定
        // 3.consternation中提前綁定
        // 4.把事件的調用寫成箭頭函數的調用方式
        // class Com extends React.Component{
        //     constructor(props){
        //         super(props)
        //         this.funa=this.funa.bind(this)
        //     }
        //     funa() {
        //         console.log(this)
        //     }
        //     funa=()=>{
        //         console.log(this)
        //     }
        //     fune=(i,e)=>{
        //         console.log(i)
        //         console.log(e)
        //     }
        //     render(){
        //         return(
        //             <div>我是組件
        //                  <button onClick={this.funa.bind(this)}>bing方式綁定</button> 
        //                  <button onClick={this.funa}>箭頭函數綁定</button>
        //                  <button onClick={this.funa}>提前綁定</button>
        //                  <button onClick={()=>{this.funa()}}></button>
        //                  <h1>函數實參傳遞</h1>
        //                  <button onClick={this.fune.bind(this,"我是參數內容")}>點我傳參</button>
        //                  <button onClick={(e)=>{this.fune("參數",e)}}>點我傳參</button>
        //             </div>
        //         )
        //     }
        // }

        // class Com extends React.Component{
        //     constructor(props){
        //         super(props)
        //         this.state={
        //             bool:true
        //         }
        //     }
        //     func(){
        //         this.setState({
        //             bool:!this.state.bool
        //         })
        //     }
        //     render(){
        //         let text;
        //         if(this.state.bool){
        //             text="你好"
        //         }else{
        //             text="登錄錯誤"
        //         }
        //         return(
        //             <div>
        //                 我是組件
        //                 <button onClick={this.func.bind(this)}></button>
        //                 {text}
        //             </div>
        //         )
        //     }
        // }

        //狀態提升  多個組件需要反映相同的變化數據，提升到他們最近的一個父組件
        //多個子組件需要利用到對方狀態的情況下 那麼這個時候就需要使用到狀態提升
        class Demo1 extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return (
                    <div>
                        我是第一個組件   {this.props.text} 
                    </div>
                )
            }
        }
        class Demo2 extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return (
                    <div>
                       我是第二個組件    {this.props.text}
                    </div>
                )
            }
        }
        class Com extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    content:"我是兩個人都想使用的數據"
                }
            }
            func=()=>{
                this.setState({
                    content:"修改數據"
                })
            }
            render(){
                return (
                    <div>
                        我是組件
                        <button onClick="this.func">點我修改</button>
                        <Demo1 text={this.state.content}/>
                        <Demo2 text={this.state.content}/>
                    </div>
                )
            }
        }
        ReactDom.render(<Com text={demo} />,document.getElementById("demoReact"));

        //create-react-app  是facebook官方推出的一款react腳手架
        //電腦上基於node環境，升級到最新版本
        //安裝
        // npm install -g create-react-app
        // create-react-app --version
        // cd 文件夾   create-react-app  項目名稱
        // npm start 啓動項目
    </script>
    <script>
        var obj={
            name:"小明",
            age:"18"
        }
        console.log(obj.name)     點的方式會方便很多
        console.log(obj["name"])  如果key是一個變量就不能用點
        Object.keys()   返回數組類型，它的值是對信息中的鍵
        Object.values()  返回數組類型，它的值是對信息中的值
        組件的作用：高耦合（邏輯緊密的內容放在一個組件中），低內聚（不同組件的依賴關係儘量鋼化，每個組件儘可能獨立）
        react的組件分爲3個部分  1.屬性props  2.狀態state  3.生命週期
        組件就是來實現頁面功能的
        組件的創建：1.函數聲明
    </script> 

</body>
</html>
React之第一次記錄

推薦2款開源、美觀的WinForm UI控件庫

NET9 AspnetCore將整合OpenAPI的文檔生成功能而無需三方庫

B/S模式和C/S模式

顯示https不安全的原因及解決辦法

react運行時報錯

遍歷對象問題

兩種不同導出Excel的方式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結
