掌握React，征服前端开发

2023-09-28 15:01:38

React笔记: 全方位剖析现代前端框架，从基础入门到项目实践

1. React入门

1.1 类组件

类组件是React中的基本组件，它继承于React.Component类，每个类组件都有一个render()方法，用于渲染组件的UI。

class MyClassComponent extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

1.2 函数式组件

函数式组件是React中另一种组件类型，它是一个简单的JavaScript函数，接受props作为参数，返回一个React元素。

const MyFunctionComponent = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

2. React Hook

React Hook是React 16.8版本中引入的新特性，它允许我们在函数组件中使用状态和生命周期方法。

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

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

3. Redux

Redux是一个用于管理应用状态的可预测状态容器，它遵循单向数据流原则，使得应用程序的状态易于理解和调试。

const store = createStore(reducer);

const MyReduxComponent = () => {
  const count = useSelector((state) => state.count);

  const dispatch = useDispatch();

  const incrementCount = () => {
    dispatch({ type: 'INCREMENT_COUNT' });
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>+</button>
    </div>
  );
};

4. Redux Hook

Redux Hook是React和Redux团队合作开发的一组钩子，它允许我们在函数组件中使用Redux。

const MyReduxHookComponent = () => {
  const count = useSelector((state) => state.count);

  const dispatch = useDispatch();

  const incrementCount = () => {
    dispatch({ type: 'INCREMENT_COUNT' });
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>+</button>
    </div>
  );
};