react.js 从零开始(一)

React是一个用于构建用户界面的JavaScript库。它是Facebook和社区中的一些开发者开发的。React主要用于构建单页应用程序和移动应用程序。React的主要特点是它使用了虚拟DOM来使得应用程序的性能得到极大的提升。本文将对React的基本概念,使用方法以及案例进行详细介绍。

一、React基本概念

1.组件(Component)

React应用程序是由多个组件组成的,每个组件是一个独立的、可复用的代码块,用于构建用户界面中的一个部分。React组件可以是一个简单的代码块,也可以是一个复杂的代码块。React组件主要有两种:函数组件和类组件。

函数组件:

```javascript

function Hello(props) {

return

Hello, {props.name}!

;

}

ReactDOM.render(, document.getElementById('root'));

```

类组件:

```javascript

class Hello extends React.Component {

render() {

return

Hello, {this.props.name}!

;

}

}

ReactDOM.render(, document.getElementById('root'));

```

2.状态(State)

状态是React组件的一种数据存储方式,用于在组件内部存储和管理数据。状态可以是任何JavaScript数据类型,如字符串、对象、数组等等。在类组件中使用状态需要使用构造函数初始化它。在函数组件中使用React的钩子函数useState来定义状态。

类组件使用状态:

```javascript

class Counter extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 };

}

handleClick = () => {

this.setState({ count: this.state.count + 1 });

}

render() {

return (

Count: {this.state.count}

);

}

}

ReactDOM.render(, document.getElementById('root'));

```

函数组件使用状态:

```javascript

function Counter() {

const [count, setCount] = useState(0);

const handleClick = () => {

setCount(count + 1);

}

return (

Count: {count}

);

}

ReactDOM.render(, document.getElementById('root'));

```

3.属性(Props)

属性是React组件接收的数据,用于组件之间的数据传递。属性可以是任何JavaScript数据类型,如字符串、数字、布尔值等等。

```javascript

function Welcome(props) {

return

Hello, {props.name}!

;

}

ReactDOM.render(, document.getElementById('root'));

```

4.事件(Events)

React组件可以响应用户的事件,如鼠标点击、键盘输入等等。React事件和原生DOM事件不同,它使用驼峰命名法,而不是小写字母。另外,在React中,我们需要使用onClick、onKeyDown等等属性来声明一个事件响应函数,而不是使用addEventListener等原生DOM事件方法。

```javascript

class Button extends React.Component {

handleClick = () => {

console.log('Button Clicked!');

}

render() {

return ;

}

}

ReactDOM.render(

);

}

}

ReactDOM.render(, document.getElementById('root'));

```

3.使用JSX语法

JSX是一种类似HTML的语法,用于描述组件的结构和内容。使用JSX语法可以使代码更清晰简洁,易于阅读和维护。在JSX语法中,我们可以使用大括号{}表示JavaScript表达式。

```javascript

function Hello(props) {

return

Hello, {props.name.toUpperCase()}!

;

}

ReactDOM.render(, document.getElementById('root'));

```

4.使用样式和类名

在React中,我们可以使用style属性设置内联样式,也可以使用className属性设置类名。

```javascript

function Hello(props) {

return (

Hello, {props.name.toUpperCase()}!

);

}

ReactDOM.render(, document.getElementById('root'));

```

5.组件之间的通信

在React应用程序中,组件之间可以通过props和状态来进行通信。父组件可以通过props向子组件传递数据,子组件可以通过回调函数和props向父组件传递数据。另外,React还提供了Context API和Redux等工具,用于更复杂的组件通信场景。

```javascript

class Parent extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 };

}

handleClick = () => {

this.setState({ count: this.state.count + 1 });

}

render() {

return (

Parent: {this.state.count}

);

}

}

function Child(props) {

return (

Child: {props.count}

);

}

ReactDOM.render(, document.getElementById('root'));

```

三、React案例

1.计数器

使用React编写一个简单的计数器应用程序,包含增加、减少、重置等功能。

```javascript

class Counter extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 };

}

handleIncrement = () => {

this.setState({ count: this.state.count + 1 });

}

handleDecrement = () => {

this.setState({ count: this.state.count - 1 });

}

handleReset = () => {

this.setState({ count: 0 });

}

render() {

return (

Count: {this.state.count}

);

}

}

ReactDOM.render(, document.getElementById('root'));

```

2.待办事项列表

使用React编写一个简单的待办事项列表应用程序,用户可以添加、删除事项。

```javascript

class TodoList extends React.Component {

constructor(props) {

super(props);

this.state = { items: [] };

this.inputRef = React.createRef();

}

handleAdd = () => {

const newItem = this.inputRef.current.value;

if (newItem) {

this.setState({ items: [...this.state.items, newItem] });

}

this.inputRef.current.value = '';

}

handleDelete = (index) => {

this.setState({ items: this.state.items.filter((_, i) => i !== index) });

}

render() {

return (

    {this.state.items.map((item, index) => (

  • {item}

  • ))}

);

}

}

ReactDOM.render(, document.getElementById('root'));

```

以上为React的基本概念、使用方法以及案例的介绍。希望这篇文章对你有所帮助。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队,专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务,帮助客户在激烈的市场竞争中获得更大的优势和发展机会!

点赞(113) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部