React描述UI部分学习完毕(Day:5)

任务：学习React官档描述UI部分

今天跟着官档看完了props之后，我找了一个b站的课程开始看，目前学到了基础样式的控制。链接：https://www.bilibili.com/video/BV1ZB4y1Z7o8/?p=13&spm_id_from=pageDriver&vd_source=0c69fbba48c3d9261273e8ba6e1dd239

下面是今天的学习内容：

1、

const count = 100
function getName(){
  return 'Xie Jianqiang'
}
function App(){

  return(
    <div className="App">
      this is App
      {/*使用引号传递字符串*/}
      {'this is messag'}
      {/*识别js变量*/}
      {count}
      {/*函数调用 */}
      {getName()}
      {/*方法调用 */}
      {new Date().getDate()}
      {/*使用js对象*/}
      <div style={{ color: 'red'}}>this is div</div>

    </div>
  )
}
export default App

这里是快速回顾了一下JSX的语法

2、渲染列表

const list = [
  {id: 1001, name: 'Vue'},
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' },
]
function App(){
  return(
    <div>
      this is App
      {/* 渲染列表 */}
      {/* 注意事项：加上独一无二的key值 字符串或number */}
      {/* key的作用：React内部使用，提升更新性能的 */}
      <ul>
        {list.map(item=><li key={item.id}>{item.name}</li>)}
      </ul>

    </div>
  )
}
export default App

3、条件渲染中的三目运算符和与运算符

const isLogin = false 
function App(){
  return (
    <div className="App">
      {/* 逻辑与 && */}
      {isLogin && <span>this is span</span>}
      {/* 三元运算 */}
      {isLogin ? <span>Xie Jianqiang</span>:<span>loading...</span>}
    </div>
  )
}
export default App

两者区别：与运算：前者为真，显示一种结果A，不会显出结果B 三目运算：如果为真，则是结果A，如果判断不是真，直接给出结果B

4、复杂的条件渲染

const articleType = 2 // 0 1 3
//定义核心函数，根据文章的不同类型返回JSX模板

function getArticleTem(){
  if(articleType === 0){
    return <div>无图模式</div>
  }else if(articleType === 1){
    return <div>单图模式</div>
  }else if(articleType === 3){
    return <div>三图模式</div>
  }
}
function App(){
  return(
    <div className="App">
      {/* 调用函数渲染不同的模版 */}
      {getArticleTem()}

    </div>
  )
}
export default App

5、事件绑定和传递参数（包括事件参数e，自定义参数写法，已经两者的结合）

//五、事件绑定
function App(){
  // const handleClick = ()=>{
  //   console.log('button被点击')
  // }
  //1、事件参数e
  // const handleClick = (e) => {
  //   console.log('button被点击', e)
  // }
  //2、传递自定义参数
  // const handleClick = (name) => {
  //   console.log('button被点击',name )
  // }

  //3、传递e和自定义参数
  const handleClick = (name,e) => {
    console.log('button被点击', name,e)
  }
  return(
    <div className="App">
      <button onClick={(e)=>handleClick('xiejianqiang',e)}>click me</button>

    </div>
  )
}
export default App

6、定义组件

function Button(){
  return <button>
    Click me!
  </button>
}
function App(){
  return(
    <div className="App">
    {/* 自闭和组件 */}
    <Button />
    {/* 成对标签 */}
    <Button></Button>
    </div>
  )
}
export default App

7、通过useState实现一个计数器

import { useState } from "react"
function App() {
  //1、调用useState添加一个状态变量
  //2、count 就是状态变量
  //3、setcount就是修改状态变量的方法
  const [count, setCount] = useState(0)  
  //点击事件回掉
  const handleClick = () =>{
    setCount(count+1)
  }
  return (
    <div>
      <button  onClick={handleClick}>{count}</button>
    </div>
  )
}
export default App

8、修改状态的规则以及修改对象的规则

import { useEffect, useState } from "react"

function App(){
  let[count,setCount] = useState(0) 
  const handleClick = ()=>{

    // count++
    // console.log(count)
    //直接修改，无法引发视图更新

    setCount(count + 1)
  }

  //修改对象状态
  const [form,setForm] = useState({name:'xiejianqiang'})
  const changeForm = ()=>{
    //错误写法：直接修改
    // form.name= 'abcd'

    //正确写法，通过set去调用
    setForm({
      ...form,
      name: 'Mark'
    })
  }
  return(
    <div className="App">
      <button onClick={handleClick}>{count}</button>
      <button onClick={changeForm}>修改form{form.name}</button>
    </div>
  )
}
export default App

9、基础样式控制

这里通过class类名控制这是index.css

.foo{
    color: blue;
}

这是App.js

import './index.css'
const style = {
  color: 'red',
  fontSize: '50px'

}

function App(){
  return(
    <div >
      {/* 行内样式控制 */}
      {/* <span style={{color: 'red'}}>这里是行内样式控制</span> */}
      {/* 方法2：放在外面 */}
      <span style={style}>这里是行内样式控制</span>
      {/* 通过class类名控制 */}
      <span className="foo">this is class foo</span>
    </div>
  )
}
export default App

这个demo里面三种方式都有，普通的行内控制和写一个方法控制还有呈现的类名控制都有

今天就学到这里了，然后周末我会去抽空把前端的基础补一下，后面还是按照马老师制定的实习计划走

XJQ124 / Some-notes

React描述UI部分学习完毕(Day:5) #9