React基础知识(一)

最新推荐文章于 2025-09-21 04:01:07 发布

原创最新推荐文章于 2025-09-21 04:01:07 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #es6

React 专栏收录该内容

5 篇文章

订阅专栏

本文主要介绍了React的相关知识，包括搭建工作环境，若代码写在HTML文档中页面启动无需服务器，写在独立js文件则需要。还讲解了第一个React程序，涉及核心方法、JSX代码规则，以及React组件，如为HTML元素绑定事件、定义数据区等内容。

一、搭建React工作环境

React的核心库：react.development.js。
React进行Dom操作的库：react-dom.development.js。
将JSX语言转换为JavaScript语言：babel.min.js。

如果我们将所有的React代码都书写在HTML文档中，则页面的启动不需要服务器。
如果我们将所有的React代码都书写在独立的js文件中，则页面的启动需要服务器。

<!-- 注:引入顺序不可改变 -->
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel" src="js/index.js"></script>

二、第一个React程序：Hello，React！

1. React的核心方法

React的核心方法：ReactDOM.render(JSX代码,DOM Node)
功能：将JSX代码生成的HTML节点放入指定的DOM节点中。

ReactDOM.render(
   <h1>Hello,React!</h1>,
   document.getElementById(“app”)
)

2. JSX代码必须具备一个根节点

3. JSX是HTML和JavaScript语言的混合

HTML代码必须用<>扩住。
JavaScript代码必须用{}扩住
在HTML代码中嵌入的JavaScript代码必须是一个数组。
例：做一个数组，在页面中利用React技术将数组元素渲染为一个无序列表

let list=['张三','李四',……];
ReactDOM.render(
<div>
	<ul>
		{
			list.map(item=>{
				return <li>{item}</li>
			})
		}
	</ul>
</div>,
document.getElementById(“app”)
)
//也可以将对数组的操作放在核心方法以外，并最终生成数组

三. React组件

React组件名必须用大写字母开头,格式：

class 组件名 extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		return (
			//JSX代码
		)
	}
}

1. 为组件中的HTML元素绑定事件

btnClick(){
	//
}
render(){
  return (
  	<h1 onClick={this.h1Click}></h1>
  )
}

2. 如何定义数据区

数据区定义在组件的构造函数中，以类的属性来进行定义

constructor(props){
	super(props);
	this.state={
		//数据区
	}
}

在JSX代码中如何调用数据区中的数据：{this.state.变量名}
在方法中如何使用指向组件的this：

<button onClick={this.btnClick.bind(this)}>单击</button>

如何修改数据区中的数据：

this.setState({
	a:200
})

在组件的使用过程中，可以通过类似于HTML属性的格式向组件定义部分传递参数

<Book title=你好"" ok="Hello"></Book>
//引用属性：this.props.title   this.props.ok

class Book extends React.Component{
    constructor(props){
        super(props);  	//调用父组件传递属性，参照ES6 class 关键字
        this.state={  	//state是类Book的属性，state是组件Book的数据区
            a:100,
            list:['第一','第二']
        };
    }

    //h1的单击事件
    h1Click(){
        window.alert(this.props.ok);
    }

    //按钮的单击事件
    btnClick(){
        console.log(this);
        this.setState({
            a:this.props.title
        })
    }
    render(){
        return (
            <div>
                <h1 onClick={this.h1Click.bind(this)}>
                    欢迎学习React组件{this.state.a}
                </h1>
                <hr></hr>
                <button onClick={this.btnClick.bind(this)}>单击</button>
                    //参照函数的apply()或call()方法
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <Book title="你好" ok="Hello"></Book>
    </div>,
    document.getElementById('app')
);