NPX create-react-app {app-名字}

< / div >

构造函数(道具)

• 可选, 尤其是CRA这么受欢迎, JavaScript的类字段声明默认包含在哪里. 如果在类体内通过箭头函数绑定方法，那么声明是没有意义的. 类似的状态也可以初始化为类属性.
• 应该只用于初始化本地状态的对象和绑定方法在ES6类.

componentDidMount ()

• 在这里进行Ajax调用.
• 如果需要事件侦听器、订阅等，请在此处添加它们.
• 你可以用 设置状态 这里(但它会使组件呈现).

componentWillUnmount ()

• 清理所有仍在进行的东西.g.， Ajax应该被中断、订阅取消、计时器被清除，等等.
• 不要打电话 设置状态，因为这是毫无意义的，因为组件将被卸载(并且您将得到一个警告)。.

componentDidUpdate(prev道具, prev状态, snapshot)

• 当组件刚刚完成更新时发生(不会在初始渲染时发生).
• 有三个参数是可选的使用(以前的道具, 以前的状态, 并且只有在组件实现时才会出现的快照 getSnapshotBeforeUpdate).
• 只有在 should组件Update 返回true.
• 如果你使用 设置状态 在这里，你应该保护它，否则你会陷入一个无限循环.

should组件Update (next道具 next状态)

• 仅用于性能优化.
• 如果它返回false，那么渲染将不会被调用.
• Pure组件 如果被覆盖的SCO只是肤浅的道具/状态比较，可以使用吗.

getSnapshotBeforeUpdate ()

• 可以用于保存有关当前DOM的一些信息，例如.g.，当前滚动位置，稍后可以在其中重用 componentDidUpdate 恢复卷轴的位置.

componentDidCatch(错误,信息)

• 日志错误应该发生的地方.
• 可以调用 设置状态，但在未来的版本中，它将被丢弃，取而代之的是静态方法 getDerived状态FromError(错误)，它将通过返回一个值来更新状态.

还有两个额外的方法，它们都是静态的，在其他解释中提到过

静态getDerived状态FromError(错误)

• 这里有错误信息.
• 应该返回一个对象值，该对象值将更新可用于处理错误的状态(通过显示某些内容)。.
• 因为它是静态的，所以它不能访问组件实例本身.

静态getSnapshotBeforeUpdate(道具, 状态)

• 应该在道具随时间变化的情况下使用吗, 根据反应文档, 它可能对转换组件有用.
• 因为它是静态的，所以它不能访问组件实例本身.

请注意, 到目前为止，很少有比这更多的方法可用, 但它们应该在反应 17中被删除.0，这就是为什么这里没有提到它们.

国家对. 道具

让我们从 道具，因为它们更容易更快地解释. 道具是传递给组件的属性，以后可以在组件中重用，用于显示信息/业务逻辑等.

从' 反应 '中导入反应， {组件};

导出默认类App扩展组件{
   呈现(){

       回报(
           

               
           
       );
   }
}

const HelloWorld = (道具) => 
Hello {道具.名字}

在上面的例子中， 名字 是一个道具. 道具是只读元素，不能在子组件中直接更改. 同时, 有一个人们经常做的坏习惯, 也就是将道具复制到状态，然后对状态进行操作. 当然, 有些情况下，你想做一些类似“初始状态，将更新父组件提交后,但在这种情况下，这种情况更为罕见, 初始状态进食可能说得通. 同时, 不仅像字符串这样的属性可以传递给子组件, 还有数字, 对象, 功能, 等.

道具还有一个更有用的东西叫做 default道具, 一个静态字段，它可以告诉你组件的默认道具是什么(当它们没有传递给组件时), 例如).

如遇“起吊状态”,，其中一个组件(父组件)有一个状态，稍后被它的子组件(例如.g., 一个子节点显示它，另一个子节点允许编辑), 然后我们需要将函数从父级传递给子级, 它允许我们更新父节点的本地状态.

状态另一方面，是可以修改的局部状态，但通过使用 这.设置状态. 如果有人能直接改变状态, 组件将不会意识到更改，也不会重新呈现以反映所提到的状态更改.

设置状态 是更改局部状态对象的方法(通过执行浅合并)。, 在那之后, 组件通过重新呈现自身来响应. 请注意，在 设置状态 ，则 这.状态 属性不会立即反映函数中提到的更改(它具有异步性质) 设置状态 可能会因为优化而批处理在一起. 它有几种方法可以被调用，其中一种可能性允许我们在更新状态后对组件做一些事情:

• 设置状态({值:' 5 '})
• 设置状态((状态, 道具) => ({value: 状态.Name + " ' s "})
• 设置状态([object / 函数 like above], () => {}) -这个表格允许我们附上 回调, 当状态将反映我们想要的数据(在第一个参数中)时，将调用它.

从' 反应 '中导入反应， {组件};

导出默认类App扩展组件{
   状态= {
       姓名:“某人:)”
   }

   onClick = () => 这.设置状态({名字: 'You'})

   呈现(){
       回报(
           

               
           
       );
   }
}

const HelloWorld = (道具) => 
Hello {道具.名字}

的反应环境

反应最近稳定了上下文API(在反应中已经存在很长一段时间了), 尽管被一些最流行的库(如回来的)广泛使用，但它还是一个实验性的功能。), 这帮我们解决了一个问题:道具钻. 道具钻孔简而言之就是在结构内部深层传递道具的一种方式.g., 它可以是组件的某种主题, 特定语言的本地化, 用户信息, 等等....... 在语境之前(或者更确切地说，在它变得非实验性之前), 它通过递归的方式从父节点传递到子节点，一直传递到最后一个叶子(显然，回来的也可以解决这个问题)。. 请注意，这个功能只能解决道具钻孔问题，而不能替代回来的或Mobx等功能. 很明显, 如果您仅为此使用状态管理库, 然后你可以自由更换.

结束

这是反应教程的第一部分. 在接下来的文章中, 我们希望讨论更高级的话题, 从样式化到检查类型, 生产部署和性能优化.

< / div >< / div >< / div >< / div >