React初次使用

大概过了一下JS，今天再试试React

一、React核心语法

1、脚手架创建一个项目

npx create-react-app demo

2、插值

function App() {
  const divContent = '标签内容'
  const divTitle = '标签标题'

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>

      <div title={divTitle}>
        {divContent}
      </div>
    </div>
  );
}

function App() {
  const list = ['小王','小李','小翠']
  const listContent = list.map(item => (
    <li>{item}</li>
  ))

  return (
    <div className="App">
      <header className="App-header">
      </header>
    <div>
        <ul>{listContent}</ul>
    </div>
  );
}

function App() {
  const list = [
    {id: 1, name: '小李'},
    {id: 2, name: '小王'},
    {id: 3, name: '小翠'}
  ]
  const listContent = list.map(item => (
    <li key={item.id}>{item.name}</li>
  ))

  return (
    <div className="App">
      <header className="App-header">
      </header>
    <div>
        <ul>{listContent}</ul>
    </div>
  );
}

事件按钮

function App() {

  // const list = [
  //   {id: 1, name: '小李'},
  //   {id: 2, name: '小王'},
  //   {id: 3, name: '小翠'}
  // ]
  
  function handleClick(){
    alert("点击")
  }


  return (
    <div className="App">
      <button onClick={handleClick}>按钮</button>
    </div>
  );
}

export default App;

状态

直接修改是不生效的

function App() {

  // const list = [
  //   {id: 1, name: '小李'},
  //   {id: 2, name: '小王'},
  //   {id: 3, name: '小翠'}
  // ]
  
  let divContent = "默认内容"

  function handleClick(){
    divContent = "新内容"
  }


  return (
    <div className="App">
      <span>{divContent}</span>
      <button onClick={handleClick}>按钮</button>
    </div>
  );
}

export default App;

需要使用useState状态变更

import { useState } from 'react'

function App() {
  
  //let divContent = "默认内容"
  const [content, setContent] = useState('默认内容')

  function handleClick(){
    setContent("新内容")
  }

  return (
    <div className="App">
      <span>{content}</span>
      <button onClick={handleClick}>按钮</button>
    </div>
  );
}

export default App;

import { useState } from 'react'

function App() {
  const [data, setData] = useState({
    title: '默认标题',
    content: '默认内容'
  })

  function handleClick(){
    //setContent("新内容")
    setData({
      ...data,
      content: "新内容"
    })
  }

  return (
    <div className="App">
      <span title={data.title}>{data.content}</span>
      <button onClick={handleClick}>按钮</button>
    </div>
  );
}

export default App;

数组形式的状态

import { useState } from 'react'

function App() {
  const [data, setData] = useState([
    {id: 1, name: '小李'},
    {id: 2, name: '小王'},
    {id: 3, name: '小翠'}
  ])

  const listData = data.map(item => (
    <li key={data.id}>{item.name}</li>
  ))

  let id = 3
  function handleClick(){
    //setContent("新内容")
    setData([
      ...data,
      {id: id++, name: "小猫"}
    ])
  }

  return (
    <div className="App">
      <ul>{listData}</ul>
      <button onClick={handleClick}>按钮</button>
    </div>
  );
}

export default App;

二、React组件通讯、插槽、Context Hook
react DOM 进行Props设置

function App() {

  const imgData = {
    className: "small",
    style: {
      width: 200,
      height: 200,
      background: 'grey'
    }
  }

  return (
    <div className="App">
      <img 
        src={logo} 
        alt=""
        {...imgData}
      />
    </div>
  );
}

export default App;

函数组件

function Article({title, content, active}){
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
      <p>状态：{active ? '显示中':'隐藏中'}</p>
    </div>
  )
}


function App() {
  return (
    <div className="App">
      <Article
        title="标签1"
        content="内容1"
        active
      />
      <Article
        title="标签2"
        content="内容2"
      />
      <Article
        title="标签3"
        content="内容3"
      />
    </div>
  );
}

export default App;

优化从夫组件到子组件传值

function Article({title, detailData}){
  return (
    <div>
      <h1>{title}</h1>
      <Detail {...detailData}/>
    </div>
  )
}

function Detail({content,active}){
  return (
    <>
      <p>{content}</p>
      <p>状态：{active ? '显示中':'隐藏中'}</p>
    </>
  )
}

function App() {

  const getArtData = {
    title: '标签1',
    detailData:{
      content: '内容1',
      active: true
    }
  }

  return (
    <div className="App">
      <Article
      {...getArtData}
      />
    </div>
  );
}

export default App;

将JSX作为Props传递(组件插槽)

function List({ children }){
  return (
    <ul>
      {children}
    </ul>
  )
}

function App() {
  return (
    <div className="App">
      <List>
        <li>列表1</li>
        <li>列表1</li>
      </List>
    </div>
  );
}

export default App;

子组件向父组件传递

function Detail({onActive}){
  const [status, setStatus] = useState(false)

  function handleClick(){
    setStatus(!false)
    onActive(status)
  }

  return (
    <div>
      <p style={{
        display: status ? 'block':'none'
      }}>Detail内容</p>
      <button onClick={handleClick}>按钮</button>
    </div>
  )
}

function App() {
  function handleActive({status}){
    alert(status)
  }
  return (
    <div className="App">
      <Detail
        onActive={handleActive}
      />
    </div>
  );
}

export default App;