React基本使用知识点总结

本片总结了使用React框架后，一些基本API和组件使用。包括：JSX语法，条件判断、列表渲染、事件、组件和props（类型检查）、state和setState、组件生命周期。

一、创建项目

React项目可以使用create-react-app工具来快速创建。下面是创建React项目的步骤：

1. 首先，确保你已经安装了Node.js和npm包管理器。
2. 打开终端或命令行窗口，进入你想要创建项目的目录。
3. 运行以下命令：npx create-react-app my-app，其中my-app是你的项目名称。如果你已经全局安装了create-react-app，也可以直接使用create-react-app my-app命令。
4. 等待项目创建完成后，进入my-app目录。
5. 运行npm start命令，启动开发服务器。
6. 打开浏览器，访问http://localhost:3000，你应该能看到React应用程序的欢迎页面。

以上是创建了一个React项目所有步骤，可以开始编写代码了。

二、JSX语法

变量和表达式

当在JSX中使用变量和表达式时，需要将它们用花括号{}包裹起来。下面是一些JSX中使用变量和表达式的例子：

1. 使用变量：

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

2. 使用表达式：

const x = 1;
const y = 2;
const element = <h2>{x + y}</h2>;

3. 使用条件表达式：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
  </div>
);

在第三个例子中，我们使用了条件表达式isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>来根据isLoggedIn的值来渲染不同的内容。

class和style

在React中，可以使用JSX语法来设置HTML元素的class和style属性。下面是一些JSX中使用class和style的例子：

1. 使用class：

const element = <div className="box">Some content</div>;

在JSX中，由于class是JavaScript的保留字，所以需要使用className来设置HTML元素的class属性。

2. 使用style：

const styles = {
  color: 'red',
  backgroundColor: 'blue',
  fontSize: '20px'
};

const element = <div style={styles}>Some content</div>;

在JSX中，可以使用JavaScript对象来设置HTML元素的style属性。需要注意的是，属性名需要使用驼峰命名法，例如backgroundColor代替background-color。此外，属性值需要使用字符串形式表示，例如'red'、'blue'等。

子元素和组件

当使用JSX语法时，我们可以使用尖括号来创建子元素和组件。举个例子，如果我们要创建一个包含两个子元素的div，可以这样写：

<div>
  <p>子元素1</p>
  <p>子元素2</p>
</div>

如果我们要使用一个组件，可以这样写：

<MyComponent />

其中，MyComponent是一个React组件的名称。如果我们要给组件传递属性，可以这样写：

<MyComponent prop1="value1" prop2="value2" />

在组件内部，我们可以通过props对象来访问这些属性的值。

三、条件判断

if else 和 逻辑运算符 &&

在React中，我们可以使用条件判断来渲染不同的内容。在JSX语法中，我们可以使用三元运算符或者&&运算符来实现if else的效果。

下面是使用三元运算符的例子：

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome, user!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

在上面的例子中，我们使用了一个名为isLoggedIn的变量来判断用户是否已经登录。如果已经登录，我们就渲染一个欢迎信息；否则，我们就渲染一个提示信息。

下面是使用&&运算符的例子：

function App() {
  const isLoggedIn = false;
  return (
    <div>
      {isLoggedIn && <h1>Welcome, user!</h1>}
      {!isLoggedIn && <h1>Please log in.</h1>}
    </div>
  );
}

在上面的例子中，我们仍然使用isLoggedIn变量来判断用户是否已经登录。如果已经登录，我们就渲染一个欢迎信息；否则，我们就渲染一个提示信息。注意，在使用&&运算符时，我们需要将条件判断放在花括号中，以便在JSX中使用。

三元表达式

在React中，我们可以使用JSX语法中的三元表达式来实现条件渲染。下面是一个简单的例子：

function App() {
  const isLogged = true;
  return (
    <div>
      <h1>{isLogged ? 'Welcome!' : 'Please log in'}</h1>
    </div>
  );
}

在上面的例子中，我们定义了一个名为isLogged的变量来表示用户是否已经登录。然后，我们在JSX中使用了一个三元表达式来根据isLogged的值来渲染不同的内容。如果isLogged为true，我们就渲染一个欢迎信息；否则，我们就渲染一个提示信息。

四、列表

当我们需要在React中渲染列表时，可以使用JSX语法中的map()函数来遍历数据并返回一个新的数组，然后将这个数组渲染到组件中。以下是一个简单的例子：

import React from 'react';

function List(props) {
  const items = props.items.map((item, index) => {
    return <li key={index}>{item}</li>;
  });

  return (
    <ul>
      {items}
    </ul>
  );
}

export default List;

在这个例子中，我们定义了一个名为List的组件，并将一个名为items的数组作为props传入组件中。在组件中，我们使用map()函数遍历items数组，并返回一个新的数组items，其中每个元素都是一个包含列表项文本的li元素。我们还需要给每个li元素添加一个唯一的key属性，以便React能够正确地跟踪每个元素的变化。

五、事件

this

在React中，事件处理函数中的this默认是undefined，而不是指向组件实例。这是因为React使用了JavaScript的严格模式，所以事件处理函数中的this并没有被绑定到组件实例上。为了在事件处理函数中使用this，我们需要通过一些方法来绑定this。

一种常见的方法是在构造函数中使用bind()方法来绑定this，例如：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

在这个例子中，我们在构造函数中使用bind()方法来绑定handleClick方法中的this到组件实例。这样，在点击按钮时，handleClick方法中的this就会指向组件实例。

另一种方法是使用箭头函数来定义事件处理函数，例如：

import React from 'react';

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

在这个例子中，我们使用箭头函数来定义handleClick方法，这样handleClick方法中的this就会自动绑定到组件实例。这种方法比使用bind()方法更加简洁。

需要注意的是，如果我们在JSX中使用箭头函数来定义事件处理函数，每次渲染时都会创建一个新的函数，可能会对性能造成影响。因此，如果我们需要在事件处理函数中使用组件的状态或属性，最好使用bind()方法来绑定this，以避免不必要的渲染。

event对象（真实的event和currentTarget）

在React中，事件处理函数的第一个参数是一个event对象，这个对象是React封装的一个合成事件对象，它包含了一些常见的事件属性和方法，例如：

• event.target：触发事件的元素
• event.preventDefault()：阻止默认行为
• event.stopPropagation()：阻止事件冒泡

需要注意的是，在React中，合成事件对象是被重用的，即在事件处理函数执行完毕后，合成事件对象会被重置，所以如果需要异步访问合成事件对象的属性或方法，需要在事件处理函数中先将其保存到一个变量中，再在异步函数中使用。同时，在React中也可以使用event.nativeEvent来访问原生事件对象。

传递参数

在React中，事件处理函数可以通过箭头函数或bind方法来传递参数。例如，我们可以在组件中定义一个方法来处理点击事件：

class MyComponent extends React.Component {
  handleClick(id, event) {
    console.log(`Clicked on item ${id}`);
  }

  render() {
    return (
      <div>
        <button onClick={(event) => this.handleClick(1, event)}>Item 1</button>
        <button onClick={this.handleClick.bind(this, 2)}>Item 2</button>
      </div>
    );
  }
}

在第一个按钮中，我们通过箭头函数来传递参数，第二个按钮中，我们使用bind方法来传递参数。在事件处理函数中，第一个参数是event对象，后面的参数是我们传递的参数。在上面的例子中，我们在点击按钮时会输出”Clicked on item 1″或”Clicked on item 2″。

六、表单

受控组件

在React中，表单组件可以是受控组件或非受控组件。受控组件是指表单元素的值受React组件的state控制，而非受控组件则是指表单元素的值由DOM本身控制。

受控组件的优点是可以方便地获取和修改表单元素的值，同时也可以对用户的输入进行验证和限制。例如，我们可以通过以下代码来创建一个受控的input元素：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    console.log(`Submitted value: ${this.state.value}`);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

在上面的例子中，我们通过value属性将input元素的值与组件的state绑定在一起，通过onChange事件来更新state中的值。在表单提交时，我们可以通过this.state.value来获取input元素的值。

需要注意的是，受控组件的值必须通过setState方法来更新，而不能直接修改。同时，由于每次输入都会触发onChange事件，所以受控组件的性能可能会受到影响。

input textarea select – 用 value

在React中，我们通常使用value属性来控制表单中的输入元素（如input、textarea、select）的值。这是因为React的设计理念是单向数据流，即数据从父组件流向子组件，子组件不能直接修改父组件的数据。因此，如果我们想要在React中控制表单中的输入元素的值，就需要将其值绑定到组件的状态中，然后通过状态来控制输入元素的值。

例如，我们可以在组件的构造函数中初始化一个状态：

constructor(props) {
  super(props);
  this.state = {
    inputValue: ''
  };
}

然后在render方法中将输入元素的值绑定到状态中：

<input type="text" value={this.state.inputValue} onChange={this.handleInputChange} />

其中，onChange事件处理函数可以通过event.target.value获取输入元素的值，并将其更新到状态中：

handleInputChange(event) {
  this.setState({
    inputValue: event.target.value
  });
}

这样，当用户输入时，输入元素的值会被更新到状态中，从而触发组件的重新渲染，同时输入元素的值也会被更新为状态中的值。

checkbox radio – 用 checked

对于textarea和select元素，也可以使用相同的方式来控制其值。需要注意的是，对于select元素，需要将选项的value属性设置为对应的值，否则选项将无法被选中。

对于表单中的checkbox和radio元素，我们需要使用checked属性来控制其选中状态。

和value属性类似，我们也需要将checked属性绑定到组件的状态中。例如，我们可以在组件的构造函数中初始化一个状态：

constructor(props) {
  super(props);
  this.state = {
    isChecked: false
  };
}

然后在render方法中将checkbox元素的checked属性绑定到状态中：

<input type="checkbox" checked={this.state.isChecked} onChange={this.handleCheckboxChange} />

其中，onChange事件处理函数可以通过event.target.checked获取checkbox元素的选中状态，并将其更新到状态中：

handleCheckboxChange(event) {
  this.setState({
    isChecked: event.target.checked
  });
}

这样，当用户勾选或取消勾选checkbox时，checkbox元素的选中状态会被更新到状态中，从而触发组件的重新渲染，同时checkbox元素的选中状态也会被更新为状态中的值。

对于radio元素，也可以使用相同的方式来控制其选中状态。需要注意的是，radio元素需要设置相同的name属性，以便将它们分组，同时需要将不同的radio元素绑定到不同的状态中，以便控制它们的选中状态。

七、组件和props（类型检查）

props传递数据

在React中，props是一种用于组件之间传递数据的机制。通过props，父组件可以向其子组件传递数据，使得子组件可以使用这些数据来渲染自身的UI。

在父组件中，可以通过在子组件的标签中添加属性来传递数据。例如：

<ChildComponent name="Alice" age={25} />

在子组件中，可以通过this.props对象来访问这些数据。例如：

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

在上面的例子中，子组件中的render方法使用了this.props对象来访问父组件传递的name和age属性，并将它们渲染到UI中。

需要注意的是，props是只读的，子组件不能修改父组件传递的props数据。如果需要修改这些数据，可以在父组件中使用state来管理数据，并将state传递给子组件作为props。

props传递函数

在React中，除了可以通过props传递数据，还可以通过props传递函数。这种方式可以让父组件向子组件传递一个回调函数，使得子组件可以在某些事件发生时调用这个函数，从而实现和父组件的交互。

例如，父组件可以定义一个名为handleClick的函数，并将它通过props传递给子组件：

class ParentComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked!');
  }

  render() {
    return (
      <ChildComponent onClick={this.handleClick} />
    );
  }
}

在上面的例子中，父组件定义了一个名为handleClick的函数，并将它通过onClick属性传递给子组件。

子组件可以在某些事件发生时调用这个函数。例如，在按钮被点击时，可以调用这个函数：

class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Click me</button>
    );
  }
}

在上面的例子中，子组件中的按钮元素使用了父组件传递的onClick函数，并在按钮被点击时调用它。

需要注意的是，当父组件的state或props发生变化时，React会重新渲染父组件和所有子组件。因此，如果父组件传递给子组件的函数依赖于父组件的状态或属性，那么在父组件的state或props发生变化时，这个函数也会被重新创建。如果这个函数被频繁地重新创建，可能会对性能产生影响。为了避免这种情况，可以使用React的memo或useCallback等机制来优化性能。

props类型检查（安装 npm i prop-types --save）

在React中，我们可以使用PropTypes来对组件的props进行类型检查。PropTypes是React提供的一种类型检查机制，它可以帮助我们在开发阶段发现组件props传递的类型错误，从而避免在运行时出现不必要的错误。

在React中使用PropTypes非常简单，我们只需要在组件中引入PropTypes模块，然后在组件的propTypes属性中定义props的类型即可。例如：

import PropTypes from 'prop-types';

function MyComponent(props) {
  return <div>{props.message}</div>;
}

MyComponent.propTypes = {
  message: PropTypes.string.isRequired
};

在上面的例子中，我们定义了一个名为MyComponent的组件，并且在propTypes属性中定义了一个名为message的prop，它的类型为string，并且是必须的。这样，在使用MyComponent时，如果我们传递了一个非字符串类型的message prop，或者没有传递message prop，就会在控制台中输出一个警告信息。

当然，PropTypes并不是强制要求的，如果你在项目中没有使用PropTypes，也不会影响React的正常运行。但是，在大型项目中，使用PropTypes可以帮助我们更好地维护代码，提高代码的可读性和可维护性。

* 八、setState使用方式和特点

用不可变值（对象、数组）或者用immutable.js

// 不可变值 - 数组
const list5Copy = this.state.list5.slice()
list5Copy.splice(2, 0, 'a') // 中间插入/删除
this.setState({
    list1: this.state.list1.concat(100), // 追加
    list2: [...this.state.list2, 100], // 追加
    list3: this.state.list3.slice(0, 3), // 截取
    list4: this.state.list4.filter(item => item > 100) // 筛选
    list5: list5Copy // 其他操作
})
// 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值

// 不可变值 - 对象
this.setState({
    obj1: Object.assign({}, this.state.obj1, {a: 100}),
    obj2: {...this.state.obj2, a: 100}
})
// 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值

异步更新和合并

九、生命周期

• componentDidMount 可获取 ajax 数据
• shouldComponentUpdate 可做性能优化
• componentWillUnmount 可销毁事件绑定，避免内存泄露
• shouldComponentUpdate 和 componentWillUpdate 中，不要 setState ，可能会死循环