React

最新推荐文章于 2025-03-09 10:07:09 发布

wendy_QL

最新推荐文章于 2025-03-09 10:07:09 发布

阅读量248

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react入门

本文链接：https://blog.youkuaiyun.com/wendy_QL/article/details/93617389

react入门专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍React的历史、安装方法、JSX语法、组件与props的概念、state与生命周期的使用、事件处理方式、列表与keys的实践、以及表单的处理技巧。

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

React 的发展历史

Facebook 内部用来开发 Instagram，2013 年开源了 React，随后发布了 React Native

React入门

安装

   npm install react -S
   npm install react-dom -S
   npm install @babel/standalone -S
   npm i -S react react-dom @babel/standalone

下载完成后，用

基础使用

第一个react程序HelloWorld

 <script src="node_modules/react/umd/react.development.js"></script>
 <script src="node_modules/react-dom/umd/react-dom.development.js">  </script>
 <script src="node_modules/@babel/standalone/babel.js"></script>
 <body>
    <div id='root'></div>
    <!--
    当 babel-standalone 发现 type="text/babel" 类型标签的时候：
        1. 将 script 标签中的内容转换为浏览器可以识别的 JavaScript
    -->
    <script type="text/babel">

        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('root')
        );

    </script>
</body>

jsx语法

概念

var element = <h1>Hello, world!</h1>;
它被称为 JSX，是一个 JavaScript 的语法扩展

JSX 全称 JavaScript XML ，是一种扩展的 JavaScript 语言，它允许 HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。它允许 HTML 与 JavaScript 的混写。

基本语法规则
1.必须只能有一个根节点
2.多标签写到包到一个小括号中，防止 JavaScript 自动分号不往后执行的问题。
3.遇到 HTML 标签（以 < 开头）就用 HTML 规则解析
4.单标签不能省略结束标签。
5.遇到代码块（以 { 开头），就用 JavaScript 规则解析
6.JSX 允许直接在模板中插入一个 JavaScript 变量
7.如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中
8.单标签必须结束 />
组件与props
props 是该组件对外的接口，用于接收数据, state是对内接口,相当于vue中data(){ list: []}

        // es5 函数组件 
       // 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
       function Welcome(props){
           return <h1>Hello, world!{props.name}</h1>;
       }

       // es6 class组件
       class Hello extends React.Component {
           // 构造函数
           constructor(props) {
              super(props); //调用父类构造函数 
           }
           render(){
               return (
                   <div>
                       <h1>class组件 Hello, world!{this.props.name}</h1>
                       <ul>
                           <li>html</li>
                           <li>css</li>
                           <li>javascript</li>
                       </ul>
                   </div>
               )
           }
       }
  <Welcom name='react'></Welcome>
  <Hello name='vue'/>

state与生命周期
1. state组件内数据变更的接口，
2. state用法
  在构造方法constructor中定义,
  改变state中数据值，必须使用setState方法，
  react元素中通过this.state.属性名，获取值
组件生命周期方法
componentDidMount() 组件已经被渲染到 DOM 中后运行
componentWillUnmount() 当 DOM 中 Clock 组件被删除的时候
示例

class Clock extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    currentDate: new Date(),
                    username: '小明',
                    password: '',
                }
            }
            render(){
                return (
                    <div>
                        <h1>Hello, world!</h1>
                        <h2>It is {this.state.currentDate.toLocaleTimeString()}.</h2>
                        <h3>{this.state.username}</h3>
                    </div>
                )
            }
            // 启动定时器
            componentDidMount() {
                console.log('componentDidMount >>>');
                this.timerID =setInterval(() => this.tick(), 1000);
            }
            // 清除定时器
            componentWillUnmount(){
                clearInterval( this.timerID);
                console.log('清除定时器');
            }

            tick(){
                // 改变state中数据只能通过setState方法
                this.setState({
                    currentDate : new Date()
                });
            }
        }

        

        ReactDOM.render(
            <Clock/>,
            document.getElementById('root')
        );

事件处理

在事件绑定的方法中用到this，一定要通过bind(this)绑定
this.onHandleClick = this.onHandleClick.bind(this);

 class App extends React.Component{
           constructor(props){
               super(props);
           }

           onHandleClick(){
               alert('hello world');
           }

           render(){
               return (
                   <div>
                       <button onClick={this.onHandleClick}>按钮</button>
                   </div>
               )
           }
       }

       // function onHandleClick() {
       //     alert('hello world');
       // }

       // const element = (
       //     <div>
       //         <button onClick={onHandleClick}>按钮</button>
       //     </div>
       // )


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

列表与keys

class ListUl extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    courses : ['html','javascript','css','vue','react']
                }
            }
            render(){
                return (
                    <div>
                        <ul>
                            {
                                // this.state.courses.map((item)=>{
                                //     return <li>{item}</li>;
                                // } )
                            }
                            {this.getLiItem()}
                        </ul>
                    </div>
                 )
            }

            getLiItem(){
                return this.state.courses.map((item,index)=>{
                    return <li key={index}>{item}</li>;
                } )
            }

        } 
        
        ReactDOM.render(
            <ListUl/>,
            document.getElementById('root')
        );

表单

       // 打印表单输入框数据
        class FromName extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                    username: ''
                }
                this.onHandleSubmit = this.onHandleSubmit.bind(this);
                this.onHandleChange = this.onHandleChange.bind(this);
            }

            onHandleSubmit(e){
                alert('hello ：'+ this.state.username);
                e.preventDefault(); //阻止默认submit提交事件,不再执行action请求刷新页面
            }

            onHandleChange(e){
                this.setState({
                    username: e.target.value // e.target.value获取当前表单项值
                });
            }
            render(){
                return (
                    <div>
                        <form onSubmit={this.onHandleSubmit}>
                            <input value={this.state.username} placeholder='请输入信息' onChange={this.onHandleChange} />{this.state.username}
                            <input type="submit" value="提交" />
                        </form>
                    </div>
                )
            }
        }


        ReactDOM.render(
            <FromName />,
           document.getElementById('root')
        );