React

最新推荐文章于 2023-04-18 13:24:25 发布

原创最新推荐文章于 2023-04-18 13:24:25 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍React的基本概念及其核心特性，包括声明式设计、高效性及灵活性等，并提供了创建React项目的步骤和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React：

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

特点：

声明式设计 −React采用声明范式，可以轻松描述应用。

高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

灵活 −React可以与已知的库或框架很好地配合。

JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

创建项目

在使用React之前，先确保你已经安装了node.js，后续过程都是在node环境下运行的。使用window+R，输入cmd，回车。

1. npm i -g create-react-app 安装React

2. creat-react-app myreact 创建项目

3. cd /myreact 进入到项目

4. npm start 运行项目

语法

import './App.css'
const styles={
  fontSize:48,
  color:'#f70'
}
function App(){
  var msg='123456';
  var list=[<h2>a</h2>,<h2>b</h2>,<h2>c</h2>,'d','e'];
  let text="2023年<strong>你好</strong>";
  let isLog=true;
  let flag=true;

  return (<div>
    <h1 className="active">你好</h1>
    <p style={styles}>{msg}</p>
    <p>{8>5?'大':'小'}</p>
    {list}
    <h1>列表渲染</h1>
    {list.map((item,index)=><h4 key={index}>{item}</h4>)}
    <div>
      {msg.split('').map((item,ind)=><p key={ind}>{item}</p>)}
    </div>
    <h1>条件渲染</h1>
    {isLog&&<p>123</p>}
  </div>
  )
}
export default App
// html与js混写的语法称为jsx
// jsx javascript和XML 混写
// 01{0}写js javascript表达式
// 02 {/* */}注释
// 03数组里面可以包含html
// 04有且只有一个根节点
// 05类名用className
// 06样式style会自动展开
//优点:js书写html模板方便
//     比较接近原生，编译快

import './App.css'
const styles={
  fontSize:48,
  color:'#f70'
}
function App(){
  var msg='123456';
  var list=[<h2>a</h2>,<h2>b</h2>,<h2>c</h2>,'d','e'];
  let text="2023年<strong>你好</strong>";
  let isLog=true;
  let flag=true;

  return (<div>
    <h1 className="active">你好</h1>
    <p style={styles}>{msg}</p>
    <p>{8>5?'大':'小'}</p>
    {list}
    <h1>列表渲染</h1>
    {list.map((item,index)=><h4 key={index}>{item}</h4>)}
    <div>
      {msg.split('').map((item,ind)=><p key={ind}>{item}</p>)}
    </div>
    <h1>条件渲染</h1>
    {isLog&&<p>123</p>}
  </div>
  )
}
export default App
// html与js混写的语法称为jsx
// jsx javascript和XML 混写
// 01{0}写js javascript表达式
// 02 {/* */}注释
// 03数组里面可以包含html
// 04有且只有一个根节点
// 05类名用className
// 06样式style会自动展开
//优点:js书写html模板方便
//     比较接近原生，编译快


//App.css
.active{
  color: aquamarine;
}

//导入组件
import Childa from './components/Childa'
import Childb from './components/Childb'

function App(){


  return (<div>
    <Childa></Childa>
    <Childb></Childb>
  </div>
  )
}
export default App

import React,{Component} from "react";
import Color from './components/Color'
import Size from './components/Size'
class App extends Component {
  // constructor(props) {
  //   super(props);
  // }
  //定义状态
  state = {msg:'组件传参',color:'red',size:28}
  //修改颜色状态的方法
  setColor=color=>this.setState({color})
  //修改字体大小状态的方法
  setSize=size=>this.setState({size})
  render() { 
    return (<div>
      {/* 使用状态控制颜色与大小 */}
      <p style={{
        color:this.state.color,
        fontSize:this.state.size+'px',}}>
          {this.state.msg}</p>
          {/* 传递颜色与修改颜色的方法给子组件 */}
      <Color setColor={this.setColor} color={this.state.color}>
        <p>组件插槽</p>
      </Color>
      <Size setSize={this.setSize} size={this.state.size}></Size>
    </div>);
  }
}
 
export default App;


//Color.js

function Color(props){
    return(
        <div>
            <h3>控制颜色{props.color}</h3>
            <input type="color" 
            onChange={(e)=>{
                //执行父组件的setColor方法
                //子组件color传递父组件
                props.setColor(e.target.value)
            }}
             value={props.color}/>
             {/* 插槽内容 */}
             {props.children}
        </div>
    )
}
export default Color
//默认props
Color.defaultProps={color:'#ff0000'}

//Size.js

function Size(props){
    return(
        <div>
            <h3>控制大小{props.size}</h3>
            <input type="range" 
            onChange={(e)=>{
                props.setSize(e.target.value)
            }} value={props.size}></input>
        </div>
    )
}
export default Size;

import Life from "./components/Life";
function App() {
  return (<Life></Life>);
}

export default App;

//Lise.js

import React, { Component } from "react";
class Life extends Component {
    constructor(props) {
        super(props);
        console.log("挂载-01-constructor");
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        //props友送变化时候史新state
        console.log("挂载-02-getDerivedstateFromProps")
        console.log("更新-01-getDerivedstateFromProps")
        return ({})
    }
    shouldComponentUpdate(nextProps, prevState) {
        //组件是否需要更新（组件优化)
        console.log("更新-02-shouldcomponentupdate")
        return true
    }
    state = { num: 5 }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        //组件更新前获取快照,返回的数据是cdu的第三个参数
        console.log("更新-04-getsnapshotBeforeupdate")
        return { name: "mumu", age: 18 }
    }
    componentDidUpdate(prevProps, prevState) {
        //组件更新已完成
        console.log("更新-05-componentDidUpdate")
    }
    render() {
        console.log("更新-03-render更新");
        console.log("挂载-03-render");
        return (<div>
            <h1>生命周期</h1>
            <button onClick={() => this.setState({ num: this.state.num + 1 })}>{this.state.num}</button>
        </div>);
    }
    componentDidMount() {
        console.log("挂载-04-componentDidMount");
    }
}

export default Life;
//挂载阶段
//01 constructor构造作用:初始化state
//02-getDerivedstateFromProps get获取Derived送达 state状态from从 Props
//3-render
//04-componentDidMount组件已经挂载:
//作用:监听事件，开启定时器，ajax请求，dom操作

import { useEffect, useState } from "react";
function App() {
  //创建一个state  num默认值为5 同时定义设置num的方法
  const [num, setNum] = useState(5)
  const [count, setCount] = useState(50)
  useEffect(() => {
    //模拟生命周期的componDidMount
    console.log("回调函数模拟cdm");
  }, [])
  useEffect(() => {
    //模拟生命周期的componDidUpdate
    console.log("回调函数模拟num的更新");
  }, [num, count])
  return (
    <div>
      <h1>Hoos</h1>
      <p>函数组件拥有模拟生命周期，模拟state，模拟ref的能力</p>
      <button onClick={() => setNum(num + 1)}>{num}</button>
      <button onClick={() => setCount(count + 5)}>{count}</button>
    </div>
  );
}

export default App;