掌握React的基本使用，重塑前端开发

最新推荐文章于 2025-11-01 22:40:07 发布

原创最新推荐文章于 2025-11-01 22:40:07 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #react表单 #react事件 #react条件渲染 #react遍历渲染

React 专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解React中的事件处理、条件渲染、列表与keys、表单控制、状态提升及组件组合等核心概念，通过实例帮助读者掌握React应用构建的关键技巧。

1. Handling Events

Html中处理添加事件：

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

React中：

function ActionLink() {
  function handleClick(e) { 
      e.preventDefault();  
      console.log('The link was clicked.');  
  }
  return (
    <a href="#" onClick={handleClick}> Click me </a>
  );
}

2. Conditional Rendering

根据不同条件，渲染不同的组件
如果组件的返回值为null，则不渲染该组件

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

3. Lists and Keys

React中渲染列表，简单粗暴：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

That it is! cool!

注意遍历时要给element加key属性，否则控制台会报警告。

4. Forms

An input form element whose value is controlled by React in this way is called a “controlled component”

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

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

input,textarea,select都是以上述的方式被React控制的：value={this.state,value} onChange={this.handleChange}

5. Lifting State Up

将多个组件共享的数据提升至离这些组件最近的共同父组件中进行管理。

There should be a single “source of truth” for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.

官网demo是个非常好的例子：

在这里插入图片描述

6. Composition vs Inheritance

Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

React的组件的composition和props组合起来用，而不是用继承，如下demo：

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

7. Thinking In React

React change the way that Web apps should be build.

UI -> Web apps 四步：

Break The UI Into A Component Hierarchy

将UI结构拆解成组件结构
Build A Static Version in React

It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.

这个阶段用不到state
Identify The Minimal (but complete) Representation Of UI State

找到state,即交互中哪些数据会改变
Identify Where Your State Should Live

将state放到合适的组件中维护
Add Inverse Data Flow

如果有反向数据流，即子组件影响父组件内的状态，传回调函数给子组件去影响父组件的值

更多issues