萌新react第一步:基礎使用

寫在開頭

// vscode React 模塊快捷創建
// 左上角文件->首選項->用戶片段
{
	"Snippet Name": {
		"prefix": "myReact", // 觸發片段的快捷鍵
		"body": [
			"import React, { $1 } from 'react'",
			"",
			"class $2 extends ${1} {",
			" render(){",
			"   return (",
			"		<div>"
			"     $3$0",
			"		</div>"
			"   )",
			" }",
			"}",
			"",
			"export default ${2:MyComponent}"
		],
		"description": "Create Basic Component"
	},
	"Constructor": {
		"prefix": 'ctr',
		"body": [
			"constructor() {",
			"	super()",
			"}"
		]
	}
}

state

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React!</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="demo"></div>
  <script type="text/babel">
    // 1.定義組件
    class Like extends React.Component {
      constructor(props) {
        super(props)
        // 初始化state
        this.state = {
          isLike: false
        }
      }

      // 新添加方法:內部的this默認不是組件對象,而是undefined
      handleClick = () =>{
        // 得到狀態
        const isLike = !this.state.isLike
        // 更新狀態
        this.setState({isLike})
      }

      // 重寫組件類的方法
      render() {
        // 讀取狀態
        const { isLike } = this.state
        return <h2 onClick={this.handleClick}>{isLike ? 'kirito' : 'asuna'} </h2>
      }
    }
    // 2.渲染組件標籤
    ReactDOM.render( < Like/ > , document.getElementById('demo'))
  </script>
</body>
</html>
var foo = 'bar';

props

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React!</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
</head>

<body>
  <div id="demo"></div>
  <div id="demo2"></div>
  <script type="text/babel">
    // 1.定義組件
    // function Persion(props) {
    //   return (
    //     <ul>
    //       <li>姓名: {props.name}</li>
    //       <li>年齡: {props.age}</li>
    //       <li>性別: {props.sex}</li>  
    //     </ul>
    //   )
    // }

    class Persion extends React.Component{
      render(){
        return (
          <ul>
            <li>姓名: {this.props.name}</li>
            <li>年齡: {this.props.age}</li>
            <li>性別: {this.props.sex}</li>  
          </ul>
        )
      }
    }
    // 指定屬性默認值
    Persion.defaultProps = {
      sex: '女',
      age: 15
    }
    // 指定屬性類型和必要性
    Persion.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number
    }

    // 2.渲染組件標籤
    const p1 = {
      name:'kirito',
      age:16,
      sex: '男'
    }
    // ReactDOM.render( < Persion name={p1.name} age={p1.age} sex={p1.sex}></ Persion> , document.getElementById('demo'))
    ReactDOM.render( < Persion {...p1}></ Persion> , document.getElementById('demo'))
    const p2 = {
      name:'asuna',
    }
    ReactDOM.render( < Persion name={p2.name}></ Persion> , document.getElementById('demo2'))
  </script>
</body>
</html>

定義組件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React!</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
</head>

<body>
  <div id="demo"></div>
  <script type="text/babel">
    // 定義組件
    class MyComponent extends React.Component{
      constructor(props){
        super(props)
      }
      showInput = () => {
        const input = this.refs.content
        // alert(input.value)
        alert(this.input.value)
      }
      handleBlur = (event) =>{
        alert(event.target.value)
      }
      render(){
        return (
          <div>
            <input ref="content" type="text"/>&nbsp;
            <input ref={input=>this.input = input} type="text"/>&nbsp;
            <button onClick={this.showInput}>提示輸入數量</button>&nbsp;
            <input type="text" placeholder="失去焦點提示數據" onBlur={this.handleBlur}/>  
          </div>
        )
      }
    }
    // 2.渲染組件標籤
    ReactDOM.render( < MyComponent></ MyComponent> , document.getElementById('demo'))
  </script>
</body>
</html>

組件組合使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React!</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
</head>

<body>
  <div id="demo"></div>
  <script type="text/babel">
    /*
      如果所有子組件都需要,數據保存在最外層組件中
      如果只有某個組件需要,放在對應組件中
      子組件中不能直接改變父組件的狀態
      狀態在哪個組件,更新狀態的行爲就應該定義在哪個組件
    */
    class App extends React.Component{
      constructor(props){
        super(props)
        // 初始化
        this.state = {
          todos: ['喫飯','睡覺','鍛鍊']
        }
      }
      addTodo = (todo) => {
        const {todos} = this.state
        todos.unshift(todo)
        this.setState({todos})
      }
      render(){
        const {todos} = this.state
        return (
          <div>
            <h1>Simple TODO List</h1>
            <Add addTodo={this.addTodo} count={todos.length + 1}></Add>
            <List todos={todos}></List>
          </div>  
        )
      }
    }
    class Add extends React.Component{
      constructor(props){
        super(props)
      }    
      add = () =>{
        // 讀取輸入的數據
        const todo = this.todoInput.value.trim()
        // 檢查合法性
        if (!todo) {
          return
        }
        // 添加
        this.props.addTodo(todo)
        // 清除輸入
        this.todoInput.value = ''
      }
      render(){
        return (
          <div>
            <input type="text" ref={input => this.todoInput = input} />
            <button onClick={this.add}>add #{this.props.count}</button>
          </div>
        )
      }
    }
    class List extends React.Component{
      render(){
        return (
          <ul>
            {
              this.props.todos.map((todo,index)=>{
                return <li key={index}>{todo}</li>
              })
            } 
          </ul>
        )
      }
    }
    Add.propTypes = {
      count: PropTypes.number.isRequired,
      addTodo: PropTypes.func.isRequired
    }
    List.propTypes = {
      todos: PropTypes.array.isRequired
    }
    ReactDOM.render( <App></App> , document.getElementById('demo'))
  </script>
</body>
</html>

表單提交

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React!</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
</head>

<body>
  <div id="demo"></div>
  <script type="text/babel">
    class LoginForm extends React.Component{
      constructor(props){
        super(props)
        this.state = {
          pwd: ''
        }
      }
      handleSubmit = (event) =>{
        // 阻止事件默認行爲
        const name = this.nameInput.value
        const {pwd} = this.state
        alert(`${name},'------',${pwd}`)
        event.preventDefault()
      }
      handleChange = (event) =>{
        // 讀取輸入的值
        const pwd = event.target.value
        // 更新pwd的狀態
        this.setState({pwd})
      }
      render() {
        return (
          <form action="" onSubmit={this.handleSubmit}>
          用戶名: <input type="text" ref={input => this.nameInput = input} />
          密碼: <input type="password" value={this.state.pwd} onChange={this.handleChange} />
          <input  type="submit" value="登陸"/>
        </form>
        )
      }
    }
    ReactDOM.render(<LoginForm></LoginForm>,document.getElementById('demo'))
  </script>
</body>
</html>

生命週期

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello React!</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="demo"></div>
  <script type="text/babel">
    // 1.定義組件
    class Life extends React.Component {
      constructor(props){
        super(props)
        this.state = {
          opacity: 1
        }
      }

      // 組件掛載到頁面時
      componentDidMount(){
        // 啓動循環定時器
        this.intervalId = setInterval(() => {
          console.log('定時器執行');
          let {opacity} = this.state
          opacity -= 0.1
          if (opacity <= 0) {
            opacity = 1
          }
          this.setState({opacity})
        }, 200);
      }

      distroyComponent = () => {
        // 調用刪除組件方法刪除組件
        ReactDOM.unmountComponentAtNode(document.getElementById('demo'))
      }

      // 組件將要被卸載時觸發
      componentWillUnmount(){
        // 清理定時器
        clearInterval(this.intervalId)
      }

      render() {
        const {opacity} = this.state
        return (
          <div>
            <h2 style={{'opacity': opacity}}>{this.props.msg}</h2>
            <button onClick={this.distroyComponent}>嗝屁了</button>
          </div>
        ) 
      }
    }
    ReactDOM.render( < Life msg="react噁心啊"  / > , document.getElementById('demo'))
  </script>
</body>
</html>

萌新react第一步:基礎使用

寫在開頭

state

props

定義組件

組件組合使用

表單提交

生命週期

萌新react第一步:基礎使用

React-Router基礎學習

萌新的vant爬坑記錄

vant實現上拉刷新，下拉加載

element-ui table 自定義某列樣式

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

linux以太網驅動總結