正如文章中所指出的 这是React教程的第一部分在美国，入门React相对容易. 首先使用Create React App (CRA)，初始化一个新项目，然后开始开发. Sadly, over time, 您可能会遇到这样的情况:您的代码将变得相当难以维护, 特别是如果你是React的新手. 组件可能会变得不必要地大，或者您可能最终得到可能是组件但不是组件的元素, 所以你可以在这里和那里写重复的代码.

这就是你应该尝试真正开始你的React之旅的地方——开始思考 React开发解决方案.

每当你接触一个新的应用程序, 一个新的设计，你需要稍后转换成一个React应用程序, 首先试着决定你的草图中会有哪些组件, 如何将草图分开，使它们更容易管理, 哪些元素是重复的(或它们的行为), at least). 尽量避免添加可能“在将来有用”的代码——这可能很诱人, 但是，这种未来可能永远不会到来，您将保留具有大量可配置选项的额外通用函数/组件.

Also, 如果组件长度大于, 比方说2-3个窗高, 也许它值得分开(如果可能的话)——因为这样以后更容易阅读.

控制与. React中未控制的组件

在大多数应用中, 需要输入和与用户进行某种形式的交互, 允许他们输入一些东西, 上传文件, 选择一个字段, and so on. React以两种不同的方式处理用户交互controlled and uncontrolled components.

被控制组件的值, 顾名思义, 是由React通过向与用户交互的元素提供一个值来控制的, 而非受控元素则没有value属性. 多亏了这个, 我们只有一个真实的来源，那就是React状态, 因此，我们在屏幕上看到的和我们目前所处的状态之间并不存在不匹配. 开发人员需要传递一个函数，该函数将响应用户与表单的交互, 哪个会改变它的状态.

类ControlledInput扩展React.Component {
 state = {
   value: ""
 };

 onChange = (e) => this.setState({value:值.target.value });

 render() {
   return (
     
   );
 }
}

在不受控制的React组件中, 我们不关心值如何变化, 但是如果我们想知道确切的值, 我们只是通过ref访问它.

UncontrolledInput类扩展React.Component {
 input = React.createRef();

 getValue = () => {
   console.log(this.input.current.value);
 };

 render() {
   return (
     
   );
 }
}

那么什么时候应该用? 我想说，在大多数情况下，控制组件是可行的, 但也有一些例外. 例如，需要在React中使用非受控组件的一种情况是 file type input, 因为它的值是只读的，不能通过编程方式设置(需要用户交互)。. 此外，我发现受控组件更容易阅读和更容易使用. 对受控组件进行验证是基于呈现的, 状态可以改变, 我们可以很容易地指出输入(e)有问题.g.，格式或为空).

Refs

我们已经提到过 refs，这是在类组件中可用的特殊功能，直到16年出现钩子.8.

ref可以让开发人员通过引用访问React组件或DOM元素(取决于我们附加ref的类型). 最好的做法是尽量避免使用它们，并且只在必须的场景中使用它们, 因为它们使代码更难阅读，并且破坏了从上到下的数据流. 然而，在某些情况下，它们是必要的，特别是在DOM元素上(例如.g.，以编程方式改变焦点). 当附加到React组件元素时, 您可以在所引用的组件中自由地使用方法. 尽管如此，这种做法应该避免，因为有更好的方法来处理它.g.(提升状态并将函数移动到父组件).

Refs也有三种不同的实现方式:

• 使用字符串字面值(应该避免使用)，
• 使用在ref属性中设置的回调函数，
• 通过创建ref React.createRef() 并将其绑定到类属性并通过它访问它(注意，引用将从componentDidMount生命周期中可用).

Finally, 在某些情况下，引用没有向下传递，并且当您希望从当前组件访问更深层次的引用元素时(例如.g., you have a 组件的内部 DOM元素，现在你在 组件，并且您希望从行组件中访问输入DOM焦点函数. 这就是你要用的地方 forwardRef).

引用没有被传递的一种情况是 高阶分量 在组件上使用——原因是可以理解的 ref is NOT a prop (similar to key)，所以它不会被传递下去，所以它会引用 HOC 而不是组件被它包装. 在这种情况下，我们可以用 React.forwardRef 它将props和refs作为参数，然后可以赋值给 prop 然后传递给我们想要访问的组件.

函数withNewReference(组件){
 类Hoc扩展React.Component {
   render() {
     const {forwardedRef, ...props} = this.props;

     return ;
   }
 }

 return React.forwardRef((props, ref) => {
   return ;
 });
}

错误的界限

事情越复杂，出错的可能性就越大. That’s why 错误的界限 是React的一部分吗. 那么它们是如何工作的呢?

如果出了问题而父节点没有错误边界, 它会导致整个React应用失败. 与其误导用户，显示错误信息，不如不显示信息, 但这并不一定意味着你应该崩溃整个应用程序并显示一个白屏. 有了错误边界，您可以使用更多的灵活性. 你可以在整个应用中使用一个，然后显示一条错误信息, 或者在某些小部件中使用它而不显示它们, 或者在这些小部件的位置显示少量信息.

请记住，它只涉及声明性代码的问题，而不是为处理某些事件或调用而编写的命令式代码. 对于这些，你仍然应该使用常规的 try/catch approach.

错误边界也是您可以将信息发送到 Error Logger 你用的那个 componentDidCatch 生命周期方法).

类ErrorBoundary扩展React.Component {
  state = {hasError: false};

  getDerivedStateFromError(error) {
    return {hasError: true};
  }

  componentDidCatch(error, info) {
    logToErrorLogger(错误,信息);
  }

  render() {
    if (this.state.hasError) {
      return 
Help, something went wrong.
;
    }

    return this.props.children; 
  }
}

高阶分量

高阶分量(HOC) 在React中经常被提及，并且是非常重要的 受欢迎的模式，您可能会使用(或已经使用过). 如果你熟悉hoc，你可能见过 withNavigation, connect, withouter 在许多图书馆.

HOC只是将组件作为参数的函数，与没有使用HOC包装器的组件相比，它将返回一个具有扩展功能的新组件. 多亏了这个, 您可以实现一些易于扩展的功能，这些功能可以增强您的组件.g.，导航通道). hoc也可以采取几种形式，这取决于我们有什么, 唯一需要的参数总是一个组件, 但是它可以接受额外的参数——一些选项, or like in connect, 首先调用一个带有配置的函数，然后返回一个接受参数组件并返回HOC的函数.

以下是一些你可以添加但应该避免的内容:

• 为您的包装器HOC函数添加一个显示名称(这样您就知道它是), in fact, 通过更改HOC组件显示名称来创建一个HOC).
• 不要在渲染方法中使用HOC -您应该已经在其中使用增强组件, 而不是在那里创建一个新的HOC组件，因为总是重新安装它并失去它的当前状态.
• 静态方法不会被复制, 因此，如果您想在新创建的HOC中使用一些静态方法, 你得自己抄一遍.
• The mentioned Refs 都不及格，所以用 React.forwardRef 如前所述，解决这类问题.

导出函数importantHoc() {
   return (Component) => class extends React.Component {
       importantFunction = () => {
           console.log("非常重要的功能");
       };

       render() {
           return (
               
           );
       }
   };
}

Styling

样式化不一定与React本身相关，但有很多原因值得提及.

First of all, 常规的CSS/内联样式在这里正常应用，你可以简单地在className属性中添加CSS中的类名, 它会正常工作的. 内联样式与常规HTML样式略有不同. 字符串不是通过样式传递下来的，而是每个对象都有正确的值. 样式属性也是camelcase，所以border-radius变成borderRadius，等等.

React似乎推广了一些解决方案，这些解决方案不仅在React中很常见, 例如最近集成在CRA中的CSS模块, 在哪里可以简单地导入 name.modules.css 并使用它的类(如属性)来样式化您的组件(某些ide，例如.g.， WebStorm，也有自动完成，它告诉你什么名字是可用的).

另一个在React中也很流行的解决方案是CSS-in-JS.g., the emotion library). 再次指出，CSS模块和情感(或一般的CSS-in- js)是 not limited to React.

React中的钩子

Hooks 很可能是React自重写以来最期待的新功能. 这个产品真的像宣传的那样好吗? 从我的角度来看，是的，因为它们确实是一个很棒的功能. 它们本质上是开辟新机会的职能，例如:

• 允许移除很多 class 我们用这些分量是因为我们不能有e.g.例如，局部状态或ref，因此组件的代码看起来更容易阅读.
• 使您能够使用更少的代码实现相同的效果.
• 使函数更容易思考和测试，e.g.，使用 react-testing-library.
• 也可以接受参数，一个的结果可以很容易地被另一个钩子使用(例如.g., setState from useState in useEffect).
• 最小化比类要好得多，类对于最小化来说可能会有更多的问题.
• 可能会在你的应用中删除hoc和渲染道具模式，这些模式会引入新的问题，尽管它们是为了解决其他问题而设计的.
• 可以由任何技术人员定制 开发人员反应.

有几个React钩子是默认包含的. 三个基本的是 useState, useEffect, and useContext. 还有几个额外的，e.g., useRef and useMemo，但现在，我们将重点关注基础知识.

让我们一起来看看 useState，让我们用它来创建一个简单的计数器示例. 它是如何工作的?? 基本上，整个结构非常简单，看起来像:

导出函数Counter() {
 const [counter, setCounter] = React.useState(0);

 return (
   

     {counter}
     

setCounter(counter + 1)}>+