REACT (Web开发框架 : react)极速入门

原创最新推荐文章于 2026-08-02 07:02:41 发布 2k 阅读 AI写同款

masterphp

247粉丝75篇原创

关注

React 入门（超详细）本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。阅读详情

AI摘要

本文详细介绍React框架的基础概念、核心特点及实际应用场景。包括React的基本使用方法、组件化开发流程、状态管理和事件处理机制等，并结合Ant Design进行界面美化，适合初学者快速上手。

    前面讲过了很多后端，今天复习一下前端，为啥要讲React？对咯！我这边又被借调到前端组了，和前端的同学一起做React，以前有基础加上前端同学只做过Vue，所以我毫无疑问的又被借过去了......，这个是复习资料，高级玩家可略过。

首先我要说一下，有Vue框架和JS原生的同学学习React会特别的快速，所以基础稍微差一点的同学可以先复习一下JS，特别说一下是JS
老生常谈的，说明一下啥是React和React的特点

1.React

起源于 Facebook 的内部项目，用来架设Instagram 的网站。

2.React 特点

        1.声明式设计 −React采用声明范式，可以轻松描述应用。
        2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
        3.灵活 −React可以与已知的库或框架很好地配合。
        4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
        5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
        6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

3.资源引入(自测可用)

<!-- 引入React -->
<script src="https://cdn.staticfile.net/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.net/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.net/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.net/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<!-- 引入Ant Design的JavaScript库 -->
<script src="https://unpkg.com/moment@2.29.1/min/moment.min.js"></script>
<script src="https://unpkg.com/antd@4.16.13/dist/antd.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.js" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css">

然后说一下我自己的理解：

4.容器

说得直接点就是DOM对象，所有元素都会在DOM对象里面操作，所以首先要声明一个容器（允许动态地访问和更新程序或脚本的内容、结构和www文档的风格）
<div id="example"></div>

5.渲染

前后不分离的都会使用模版引擎来渲染数据，React中使用Rendor来渲染数据（好多后端的框架也是用Rendor关键字来渲染数据）
ReactDOM.render(元素名,document.getElementById('ID名'))

方式一（函数内定义渲染元素）：
<script type="text/babel">
ReactDOM.render(
   <h1>Hello, world!</h1>,
   document.getElementById('example')//绑定元素
);
</script>

方式二（函数外定义渲染元素：
const element = <h1>Hello, world!</h1>;
ReactDOM.render(
   element,
   document.getElementById('example')
);

6.函数编程

方式一：
//定义Hello函数
function Hello(props) {
   return <h1>Hello World!</h1>;
}
//绑定函数
ReactDOM.render(<Hello />, document.getElementById("example"));

方式二：
//定义tick函数
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
//tick方法调用
setInterval(tick, 1);

7.类编程

class MessageBox extends React.Component{
   onClick = ()=>{
      alert('测试点击成功');
   }
   render = ()=>{
      return ( <div><h1 onClick={this.onClick}>测试数据</h1></div> )
   }
}

ReactDOM.render( <MessageBox/>,
   document.getElementById('example'),
)

8.JSX

JSX（JavaScript的替代语法：实质还是一样的，只是通过js引入来渲染DOM）
语法：{} 中写对应的逻辑代码

//命名helloworld_react.js 文件
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

//页面引入js
<body>
    <div id="example"></div>
    <script type="text/babel" src="helloworld_react.js"></script>
</body>

9.组件

单一组件（其实实质还是一样的，只是进行了封装和调用，类似与抽象类 + 注入）：

//定义HelloMessage方法
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}

//常量引入HelloMessage函数
const element = <HelloMessage name="Runoob"/>;
 
//数据渲染
ReactDOM.render(
    element,
    document.getElementById('example')
);


复合组件（其实实质还是一样的，只是进行了封装和调用，类似与抽象类 + 注入）：

//定义Name方法
function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
//定义Url方法
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
//定义Nickname方法
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}

//定义App函数
function App() {
    return (
    <div>
        <Name name="测试数据" />
        <Url url="https://www.baidu.com" />
        <Nickname nickname="baidu" />
    </div>
    );
}
 
//数据渲染
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

10.关键字：props、state

State (数据存储:相当于一个容器，如果需要根据条件来渲染元素，需要每次都要初始化容器)
Props (传递数据:相当于形参)

function FormattedDate(props) {
   return <h2>现在是 {props.date.toLocaleTimeString()}</h2>;
}

class Clock extends React.Component {
   //构造函数（类似PHP的构造函数）
   constructor(props) {
      super(props);
      this.state = {date: new Date()};
    }

        //挂载
   componentDidMount() {
      this.timerID = setInterval(
            () => this.tick(),
                1000
            );
        }

        //析构（类似PHP的析构函数，有构造函数就一定要有析构函数）
        componentWillUnmount() {
         clearInterval(this.timerID);
        }

        tick() {
         this.setState({
            date: new Date()
         });
        }

        //返回渲染元素
        render() {
         return (
            <div>
               <h1>my watch</h1>
               <FormattedDate date={this.state.date} />
            </div>
         );
        }
}

function App() {
   return (
      <div>
         <Clock />
            <Clock />
            <Clock />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('time'));

11.事件处理

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
        //修改状态（点击后更换相反的状态）
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
 
ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);

12.React 条件渲染

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }
 
  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }
 
  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }
 
  render() {
    const isLoggedIn = this.state.isLoggedIn;
 
    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
 
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}
 
ReactDOM.render(
  <LoginControl />,
  document.getElementById('example')
);

13.React 列表(和jquery一样，使用map循环数组数据)


function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
 
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);

14.AJAX异步请求数据

class UserGist extends React.Component {
  constructor(props) {
      super(props);
      this.state = {username: '', lastGistUrl: ''};
  }
 
 
  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  }
 
  componentWillUnmount() {
    this.serverRequest.abort();
  }
 
  render() {
    return (
      <div>
        {this.state.username} 用户最新的 Gist 共享地址：
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
}
 
ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('example')
);

15.表单

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
 
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
 
  handleChange(event) {
    this.setState({value: event.target.value});
  }
 
  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择您最喜欢的网站
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="gg">Google</option>
            <option value="rn">Runoob</option>
            <option value="tb">Taobao</option>
            <option value="fb">Facebook</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
 
ReactDOM.render(
  <FlavorForm />,
  document.getElementById('example')
);

16.Antdesign

//初始化
const {Button,Space,Icon,PageHeader} = antd;

const dataSource = [
    {key: '1',name:'姓名1', age: 10, address: '指针1地址',},
    {key: '2',name:'姓名2', age: 20, address: '指针2地址',},
];
const columns = [
    {title: '姓名', dataIndex: 'name', key: 'name',},
    {title: '年龄', dataIndex: 'age', key: 'age',},
    {title: '住址', dataIndex: 'address', key: 'address',},
    ]

//ant按钮
function Buttonclick(){
    alert('按钮点击测试')
}
ReactDOM.render(<Button type="primary" onClick={Buttonclick}>Ant按钮</Button>,document.getElementById('antbutton'))

//ant图标 + 按钮 + 表头 + 表格
function Icons(){
    return <div>
        <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
            <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
        </svg><br /><br />
        <antd.Button type="dashed">Dashed</antd.Button><br /><br />
        <antd.Button type="danger">danger</antd.Button><br /><br />
        <PageHeader className="site-page-header" onBack={() => null} title="Title" subTitle="This is a subtitle"/>
        <antd.Table dataSource={dataSource} columns={columns} /><br /><br />
    </div>
}
ReactDOM.render(<Icons/>,document.getElementById('anticon'))

17.缓存

localStorage.setItem('mark',1)
localStorage.getItem('mark')
localStorage.clear()

18.代码示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>React 实例</title>
	<script src="https://cdn.staticfile.net/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.net/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.net/babel-standalone/6.26.0/babel.min.js"></script>
	<script src="https://cdn.staticfile.net/jquery/2.1.4/jquery.min.js"></script>

	<!-- 引入React -->
	<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

	<!-- 引入Ant Design的JavaScript库 -->
	<script src="https://unpkg.com/moment@2.29.1/min/moment.min.js"></script>
	<script src="https://unpkg.com/antd@4.16.13/dist/antd.js"></script>
	<link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.css" />
	<link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.js" />
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css">

	<!-- 引入js渲染数据 -->
	<script type="text/babel" src="/static/example_jq.js"></script>
</head>
<body style="padding: 2rem">
	<!--数据渲染开始-->
	<div id="example"></div><br /><br />
	<div id="example_cla"></div><br /><br />
	<div id="example_fun"></div><br /><br />
	<div id="example_pro"></div><br /><br />
	<div id="example_jq"></div><br /><br />
	<div id="example_stats_bind"></div><br /><br />
	<div id="example_arr"></div><br /><br />
	<div id="example_arrcla"></div><br /><br />
	<div id="example_asyn"></div><br /><br />
	<!--数据渲染结束-->

	<!--antdesign组件开始-->
	<div id="antbutton"></div><br /><br />
	<div id="anticon"></div><br /><br />

	<!--antdesign组件结束-->

<script type="text/babel">

    //--------------------分界线-----------------------------------
    //简单数据渲染
    ReactDOM.render(
        <span>简单数据渲染</span>,
        document.getElementById('example')
    );

    //类渲染(调用类，使用类里面的方法)
    class ExampleCla extends React.Component{
        render() { return (<div><span>类渲染</span></div>);}
    }
    ReactDOM.render(<ExampleCla/>,document.getElementById('example_cla'));

    //函数渲染（调用函数，使用函数返回值）
    function ExampleFun() {
	    return <div><span>函数渲染</span></div>
    }
	ReactDOM.render(<ExampleFun/>,document.getElementById('example_fun'))

	//参数传递：props(只做形参)
    function ExamplePrp(props){
	    return <div><span>参数传递：{props.name}</span></div>
    }
	ReactDOM.render(<ExamplePrp name="传递测试" />,document.getElementById('example_pro'))

	//状态：State + 事件绑定 + react框架生命周期 + 函数 （元素指定需要用到this,否者对应不到指定的数据）
	class ExampleStBin extends React.Component{
        //构造函数
		constructor(porps) {
            super(porps);// 调用父类的构造函数（继承后必须声明或者重构）
			//绑定点击事件
			this.clickchange = this.clickchange.bind(this)
            //设置状态
            this.state = porps.name
        }
        //设置函数
        clickchange(){
            console.log(this.state)
        }
        //挂载函数
        componentDidMount(){
			console.log(this.state)
        }
        //析构函数
        componentWillUnmount(){
            this.state = false;
        }
        //元素渲染
        render() {return (<div onClick={this.clickchange}>状态 + 事件绑定 + react框架生命周期 测试 + 函数</div>);}
	}
    ReactDOM.render(<ExampleStBin name="false"/>,document.getElementById('example_stats_bind'))

    //数组
    const arr = ['testdata1','testdata2','testdata3','testdata4'];

    //使用map循环设置数据,函数方法
    function ExampleArr(props) {
        const dataarr = props.name
        //循环数据
        const datalist = dataarr.map((dataarr) =>
            <li key={dataarr.toString()}>
                {dataarr}
            </li>
        );
        //渲染数据
       return <div>{datalist}</div>;
    }
    ReactDOM.render(<ExampleArr name={arr}/>,document.getElementById('example_arr'))


    //数组：使用map循环设置数据,类方法
    class ExampleArrcla extends React.Component{
        render() {
            const items = this.props.names; // 假设从父组件接收一个items数组作为props
            return (
                <div>
	                <ul>
	                    {items.map((item, index) => (
	                        <li key={index}>{item}</li>
	                    ))}
	                </ul>
                </div>
            );
        }
    }
    ReactDOM.render(<ExampleArrcla names={arr}/>,document.getElementById('example_arrcla'))

	//异步请求数据 + localStorage页面缓存
    class ExampleAsyn extends React.Component {
        //构造函数
        constructor(props) {
            super(props);
            //初始化容器
            this.state = {province: '', city: ''};
        }
        //挂载
        componentDidMount() {
            //操作localstorage
	        localStorage.setItem('mark',1)
            //AJAX请求，post方法，数据格式：json
			this.httprequest = $.post(this.props.name,{"ip":this.props.ip},function(res){
				var province = res.province
				var city = res.city
				//填充容器
				this.setState({province:province,city:city})
			}.bind(this),"json");
        }

        //析构函数
        componentWillUnmount(){
            //终止请求
            this.httprequest.abort()
	        //localstorage清除
	        localStorage.clear()
        }

        //渲染
        render() {
            return (
                <div>
	                <span>对应省：{this.state.province}</span><br />
	                <span>对应市：{this.state.city}</span><br />
	                <span>localstorage输出：{localStorage.getItem('mark')}</span>
                </div>
            );
        }
    }
	ReactDOM.render(<ExampleAsyn name="http://www.xstg.com/test/get_ownership" ip="58.246.191.6"/>,document.getElementById('example_asyn'))
    //--------------------分界线-----------------------------------

    //-----------------antdesign组件开始----------------------------
    //初始化
    const {Button,Space,Icon,PageHeader} = antd;

    const dataSource = [
        {key: '1',name:'姓名1', age: 10, address: '指针1地址',},
        {key: '2',name:'姓名2', age: 20, address: '指针2地址',},
    ];
    const columns = [
        {title: '姓名', dataIndex: 'name', key: 'name',},
        {title: '年龄', dataIndex: 'age', key: 'age',},
        {title: '住址', dataIndex: 'address', key: 'address',},
	    ]

    //ant按钮
	function Buttonclick(){
	    alert('按钮点击测试')
	}
    ReactDOM.render(<Button type="primary" onClick={Buttonclick}>Ant按钮</Button>,document.getElementById('antbutton'))

    //ant图标 + 按钮 + 表头 + 表格
    function Icons(){
	    return <div>
            <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
                <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
            </svg><br /><br />
            <antd.Button type="dashed">Dashed</antd.Button><br /><br />
            <antd.Button type="danger">danger</antd.Button><br /><br />
            <PageHeader className="site-page-header" onBack={() => null} title="Title" subTitle="This is a subtitle"/>
            <antd.Table dataSource={dataSource} columns={columns} /><br /><br />
	    </div>
    }
    ReactDOM.render(<Icons/>,document.getElementById('anticon'))

    //-----------------antdesign组件结束----------------------------

</script>
</body>
</html>

标签