超级详细的react笔记(四)语法篇

1 引入

• react中的行为结构样式都是用js来实现的
• 都可以在js中编写
  • 行为:所需执行的函数,方法
  • 结构:页面搭建的结构(可以使用babel转换成react.createElement)
  • 样式: 组件或元素所使用的样式(style,css)

2 语法

• 挂载元素
• 创建元素
• 渲染值

2.1 挂载页面

vue中

• 挂载的是一个元素选择器el:"#app"

new Vue({
     
            el:"#app",//挂载点-->控制页面的区域
            data:{
     
                msg:"hello vue!"
            },
            template:'hello'
        })

react中

• 挂载的是一个元素document.getElementById('root')
• ReactDOM.render()
  • 第一个参数: 要渲染的元素
  • 第二个参数: 挂载点

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

2.2 创建元素

• 第一个参数:标签的名称
• 第二个参数:标签的属性
• 第三个参数:标签的内容
• 第n个参数:标签的内容(可以是其他标签)

const myh1= React.createElement('h1',{
     id:'my'},"我是崽崽呀")

2.3 渲染数据

• 由于是js代码,所以渲染数据一般都加上{},可以理解为{}内部可以写js的东西
• 样式类属性使用className
• 对于组件一般首字母要大写Login
• 传参时可以结合扩展运算符{...data}
• 遍历数据时可以结合map方法

2.3.1 遍历数据

const list= [
  {
     
    id:1,
    name:"laker"
  },
  {
     
    id:2,
    name:"lay"
  },
  {
     
    id:3,
    name:'key'
  }
]
ReactDOM.render(
<div>
{
     list.map(el=><h1>{
     el.id}---{
     el.name}</h1>)}
</div>,
  document.getElementById('root')
);

2.3.2 className 和 style

<div >
{
     list.map(el=><h1 style={
     {
     color:'red'}} key='{el.id}'>{
     el.id}---{
     el.name}</h1>)}
</div>

 <img src={
     logo} className="App-logo" alt="logo" />

2.3 创建组件

• 无状态组件
• 有状态组件

2.3.1 无状态组件

• 是构造函数直接创建,创建的组件首字母必须大写
• 没有自己的数据(无状态)
• 传参时需要定义形参
• 加载速度比较快
• 使用场景
  • 在数据渲染时,里面的每一个小组件

function App() {
     
  return (
    <div className="App">
      <header className="App-header">
        <img src={
     logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
         我是崽崽呀
        </a>
      </header>
    </div>
  );
}

2.3.2 有状态组件

• 是类class 创建,创建需要继承的react组件
  • 实例方法 实例属性
  • 静态方法 静态属性
• 有自己的数据(有状态) this.state
• 传参时不需要定义形参
• 加载速度较慢
• 使用场景
  • 在数据渲染时,可以结合map来使用
    

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const myh1= React.createElement('h1',{
     id:'my'},"我是崽崽呀")
const data = {
     name:"laker",age:20}
class Login extends React.Component{
     
   render(){
     
     this.state={
     
       name:"lay"
     }
    return <div> 这是login组件----{
     this.state.name}</div>
   }
}
ReactDOM.render(
  <Login></Login>,
  document.getElementById('root')
);

2.4 组件封装

1 创建组件

import React from 'react'

export default class Test extends React.Component {
     
    constructor() {
     
        super()
        this.state = {
     }
    }
    render(){
     
        return <div>Test组件
        </div>
    }
}

2 使用组件

import Test from './test'

<Test></Test>

2.5 事件绑定

2.5.1 基本使用

 return <div>Test组件
            <button onClick={
     function(){
     console.log('ok');}}>点击</button>
        </div>

2.5.2 组件使用

import React from 'react'

export default class Test extends React.Component {
     
    constructor() {
     
        super()
        this.state = {
     }
    }
    render(){
     
        return <div>Test组件
            <button onClick={
     this.click}>点击</button>
        </div>
    }
    // 实例方法
     click(){
     console.log('ok!');}
}

2.6 双向数据绑定

• 在react中,似乎{} 取代了''
• 使用箭头函数绑定触发事件
• 实例中的this 指向实例
• 绑定输入框上的onChange事件
• 获取输入框的值
  • 通过事件e.target.value
  • 通过绑定this.refs.my.value

import React from 'react'

export default class Test extends React.Component {
     
    constructor() {
     
        super()
        this.state = {
     
            msg:'123'
        }
    }
    render(){
     
        return <div>{
     this.state.msg}
            <button onClick={
     ()=>this.click()}>点击</button>
            <input type="text" value={
     this.state.msg} style={
     {
     width:'100%'}} ref='my' onChange={
     (e)=>this.change(e)} />
            </div>
    }
    change(e){
     
        const value = this.refs.my.value
        console.log(e.target.value);
      this.setState({
     
          msg : value
      })
    }
    // 实例方法
     click(){
     console.log('ok!');}
}

2.7 路由使用

<BrowserRouter>
    <div className="router-content">
      <Switch>
        <Router path="/" component={
     App} >
          <Router exact path="/docs" component={
     Docs} />
        </Router>
      </Switch>
    </div>
  </BrowserRouter>

2.8 生命周期

3 使用脚手架

• 都为全局安装,只需安装一次
• 启动项目npm start

3.1 create-react-app

3.1.1 安装

npm install -g create-react-app

3.1.2 创建

create-react-app myproject

3.1.3 预览

3.1.4 文件结构

3.2 build-react(推荐使用)

• 可选择
  • init 基本使用工具
  • complete-project 全部工具
  • simple-project 基本工具+路由

3.2.1 预览

npm install -g build-react

3.2.2 创建

• 创建的为simple-project 模板

build-react init lay

3.2.3 预览

• cnpm i 后启动项目
  

3.2.4 文件结构