新建React项目
执行如下命令创建并运行一个新的React单页面应用，应用在本地启动后会自动打开浏览器并加载，如果显示React的logo说明启动成功。
npx create-react-app my-app
cd my-app
npm start
- npx create-react-app my-app：使用create-react-app脚手架工具创建一个名为my-app的React应用。
- npm start：启动当前的React应用。
第一个React组件
React组件是什么？
- 官方定义：使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
- 所以我们做React开发其实就是开发React组件，再将这些大大小小的各种组件组合成UI界面，也可能理解为React中一切皆组件。
React组件分类：类组件和函数组件
- 创建类组件
-
在新建的my-app式程下面的src目录下创建一个MyClassComponent.js文件
image.png
- 在MyClassComponent .js中定义一个MyClassComponent的类组件，class中的render函数返回的内容就是这个类组件渲染的内容，代码如下：
import React from 'react';
class MyClassComponent extends React.Component {
render() {
return <h1>this is my class component</h1>;
}
}
export default MyClassComponent;
- 修改src目录下的App.js，App.js中定义的App函数组件为应用的根组件，App函数返回的内容即为App组件要渲染的内容，这里我们把返回的内容替换为我们自已定义的组件MyComponent，代码如下：
import './App.css';
import MyComponent from './MyComponent';
function App() {
return (
<MyComponent />
);
}
export default App;
因为在本地开发会热更新同步到浏览器中，这时我们去浏览器中查看，会发现原来页面上显示的logo已经被我们自已开发的组件替换掉了，到此我们已经成功的开发了一个类组件。
- 创建函数组件
-
在新建的my-app式程下面的src目录下创建一个MyFunctionComponent.js文件。
image.png
- 在MyFunctionComponent.js中定义一个MyFunctionComponent的函数组件，MyFunctionComponent函数返回的内容就是函数组件要渲染的内容，代码如下：
import React from 'react';
const MyFunctionComponent = () => {
return (
<h1>this is my function component</h1>
);
}
export default MyFunctionComponent;
- 修改src目录下的App.js，替换为我们开发的函数组件，到此我们又成功的开发了一个函数组件
import './App.css';
import MyFunctionComponent from './MyFunctionComponent';
function App() {
return (
<MyFunctionComponent />
);
}
export default App;
组件props：给组件传值
组件不会是一成的变的，在不同的场景中组件可能会有不同的特性，并且组件本身可能并不知道应该显示什么样的特性，需要从外部获取信息输入，通过这些信息来决定显示什么样的特性，所以我们需要能给组件传入不同的值，控制其在不同的场景中显示不同的效果。代码如下：
- 类组件传值
// 父组件
class ParentComponent extends React.Component {
render() {
return <ChildComponent name="Alex"/>;
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
return <h1>my name is {this.props.name}</h1>;
}
}
- 函数组件传值
// 父组件
const ParentComponent = () => {
return (
<ChildComponent name="Alex"/>
);
}
// 子组件
const ChildComponent = (props) => {
return (
<h1>my name is {props.name}</h1>
);
}
永远不要在组件中修改props
对组件来说props只是做为一种信息的输入，传达外部需要让组件知道的信息，所以不要试图去修改props，如果需要修改可以通过事件通知父控件修改，如果需要在组件内部控制组件的显示可能通过下面我们要讲的state来实现。
组件state：给组件设置状态
组件state是组件状态，这里存放的就是该组件的一些会改变的变量，就是状态。组件在不同的场景中可能会表现不同的状态，显示不同的效果，这些不同的状态我们可以通过state来控制，修改state会引起react重新渲染，也就是更新状态会引起组件刷新。我们可以通过setState()这个函数来设置state的值。不过要注意的是setState()这个函数是异步函数。
- 类组件state
在类组件的构造函数中定义state，通过this.state.xxx获取状态值，不能通过this.state.xxx = xxx 来赋值，需要用this.setState()方法来赋值，另外如果需要在事件回调函数中使用当前组件实例this，需要在构造函数中进行绑定。
import React from 'react';
class MyClassComponent extends React.Component {
constructor(props) {
super(props);
this.state={
count: 0,
}
// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
count: this.state.count + 1,
})
}
render() {
return (
<>
<button onClick={this.handleClick}>加1</button>
<span>{this.state.count}</span>
</>
);
}
}
export default MyClassComponent;
- 函数组件state
函数组件需要调用useState这个hook来实现，useState方法会返回一个数组，数组中有两个元素，第一个是状态引用变量，第二个是设置状态的方法，通过调用这个方法来改变状态值。
import React, { useState } from 'react';
const MyFunctionComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
}
return (
<>
<button onClick={handleClick}>加1</button>
<span>{count}</span>
</>
);
}
export default MyFunctionComponent;
组件事件处理
React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
例如，传统的 HTML：
<button onclick="activateLasers()">
Activate Lasers
</button>
在 React 中略微不同：
<button onClick={activateLasers}>
Activate Lasers
</button>
在上面的案例中我们已经简单对点击事件进行处理，需要注意的是在类组件是如果要在事件回调函数中使用this来引当前组件实例，就需要对回调函数绑定this。
下面我们再看如何给回调函数传参数：
- 类组件传参
import React from 'react';
class MyClassComponent extends React.Component {
constructor(props) {
super(props);
this.state={
count: 0,
}
// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick(e, step) {
this.setState({
count: this.state.count + step,
})
}
render() {
return (
<>
<button onClick={(e) => this.handleClick(e, 1)}>加1</button>
<span>{this.state.count}</span>
</>
);
}
}
export default MyClassComponent;
- 函数组件传参
import React, { useState } from 'react';
const MyFunctionComponent = () => {
const [count, setCount] = useState(0);
const handleClick = (e, step) => {
console.log(e);
setCount(count + step);
}
return (
<>
<button onClick={(e) => handleClick(e, 2)}>加2</button>
<span>{count}</span>
</>
);
}
export default MyFunctionComponent;
React.js学习资料
- 基础：可以先过一遍文档，再看视频
- 高阶组件：
- React Hooks
- React组件化：这个视频主要是React的一些原理讲解 (P17-P24)
- 全局状态管理：
网友评论