正文

学会React，实战案例教你高效开发

/0 浏览量
0828

第一部分：React基础入门

1.1 React简介

React是一个由Facebook开发的开源JavaScript库，用于构建用户界面（UI）。它允许开发者使用声明式编程的方法来构建UI，这使得代码更加直观和易于维护。

1.2 JSX语法

JSX是React的一种语法扩展，它允许你将HTML语法直接写入JavaScript代码中。这使得React组件的编写更加直观。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="Alice" />,
  document.getElementById('root')
);

1.3 组件与状态

React组件是构建UI的基本单元。组件可以有自己的状态（state）和属性（props）。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

第二部分：React高级特性

2.1 高阶组件（HOC）

高阶组件是一种设计模式，它允许你将组件的功能封装在一个高阶组件中，然后传递给原始组件。

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(props)
      };
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

const SelectableUser = ({ data }) => (
  <div>{data.name}</div>
);

const withSubscription = withSubscription(SelectableUser, selectData);

ReactDOM.render(
  <withSubscription />,
  document.getElementById('root')
);

2.2 Context API

Context API提供了一种无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。

const ThemeContext = React.createContext();

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {({ color }) => <button style={{ color }}>{color}</button>}
    </ThemeContext.Consumer>
  );
}

function App() {
  return (
    <ThemeContext.Provider value={{ color: 'red' }}>
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

第三部分：实战案例

3.1 创建一个待办事项列表

在这个案例中，我们将创建一个简单的待办事项列表，用户可以添加、删除待办事项。

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  addItem = (item) => {
    this.setState(prevState => ({
      items: [...prevState.items, item]
    }));
  }

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

  render() {
    return (
      <div>
        <ul>
          {this.state.items.map((item, index) => (
            <li key={index}>
              {item}
              <button onClick={() => this.removeItem(index)}>Delete</button>
            </li>
          ))}
        </ul>
        <input type="text" onChange={(e) => this.addItem(e.target.value)} />
      </div>
    );
  }
}

ReactDOM.render(<TodoList />, document.getElementById('root'));

3.2 创建一个计数器

在这个案例中，我们将创建一个简单的计数器，用户可以增加或减少计数器的值。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  decrement = () => {
    this.setState(prevState => ({
      count: prevState.count - 1
    }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

总结

通过以上实战案例，我们可以看到React在实际开发中的应用。掌握React的基础知识和高级特性，可以帮助我们高效地开发出高质量的UI应用程序。希望这篇文章能帮助你更好地学习React。

-- 展开阅读全文 --