React 在实际开发中 Variables 与 Prop 的实战运用

作者：黎燃

2022 年 8 月 25 日
内蒙古
本文字数：2137 字
阅读完需：约 7 分钟

Variables

所见，<img/>标记的 SRC 属性值是{logo}放在大括号中，这就是 JSX 识别变量的方式。

<img src={logo} className="App-logo" alt="logo" />

复制代码

React 将识别｛logo｝，并知道在我们应用程序的第二行中介绍的徽标。然后 react 将读取此文件并渲染它。让我们尝试设置自己的变量。在应用程序返回之前，添加 const subject='react'；代码现在应该如下所示：

function App() {  const subject = "React";  return (    <div className="App">      <header className="App-header">        <img src={logo} className="App-logo" alt="logo" />

复制代码

将第 8 行中的“world”替换为我们自己的变量 subject 保存时，浏览器将显示“你好，反应！”，不是“你好，世界！”变量非常方便，但我们不利用 react。

Prop

Prop 是传递到 react 组件中的任何数据。Props 写在组件中，并像 HTML 属性一样写为 prop=“value”。让我们打开 index.JS 并为＜app/＞添加第一个属性。

ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));

复制代码

在＜app/＞组件中添加一个名为 subject 的属性，该属性具有 Clarice 值。回到 App.js：

function App() {  const subject = "React";  return (  );}

复制代码

更改应用程序的函数签名，使其接收 props 作为参数。与其他参数一样，可以将 props 放在控制台日志（）中，并将其打印在浏览器中。把它放在你的主题之后，然后再回来。

function App(props) {  const subject = "React";  console.log(props);

复制代码

对象的 subject 属性对应于我们放入 app 函数签名中的 prop，Clarice 字符串对应于它的值。react 中的组件属性总是以这种方式传递到对象中。

function App(props) {  const subject = props.subject;  return (

复制代码

现在，主题是我们的道具之一，让我们转到 app.JS。使用 props 主题替换原始的 react 字符串。如果需要，还可以删除控制台日志。

生命周期

生命周期助于了解组件的运行模式，完成更复杂的组件功能，并分析组件错误的原因生命周期：组件从创建到安装并在页面上运行，然后在组件不使用时卸载的过程

发送 AJAX 请求，获取远程数据。处理 this 绑定问题

class App extends React.Component {    constructor() {        super()
        // 初始化state        this.state = {            count: 0        }        // 
        // const title = document.getElementById('title')        // 此时DOM还没渲染，拿不到DOM        // console.log(title) 结果：null        console.warn('生命周期钩子函数： 1.constructor')    }
    componentDidMount() {        // const title = document.getElementById('title')        // 1.此时已经完成DOM渲染，可以拿到DOM，进行DOM操作        // console.log(title)
        // 2.        // axios.get('http://api....')                console.warn('生命周期钩子函数： 3.componentDidMount')    }

复制代码

React 支持自定义错误边界组件以捕获具有渲染错误的子组件。如果在 react 组件中定义了两个生命周期方法 static getderivedstatefromerror（）或 componentdidcatch（）中的任何一个（或两个），它将成为错误边界。当抛出错误时，您可以在 getderivedstatefromerror（）端更改状态变量，以控制备用 UI 的呈现，并在 componentdidcatch（）方法中打印错误信息。

var HelloMessage = React.createClass({  render: function() {    return <h1>Hello {this.props.name}</h1>;  }});

复制代码

渲染时，将重新生成虚拟 DOM，但在重新渲染 UI 时，react 将仅重新渲染虚拟 DOM 的更改部分。渲染后，虚拟 DOM 中输入的值属性值实际上会发生变化，但与不同。输入在实际 DOM 中的值，因此它不会呈现到 UI。

var HelloMessage = React.createClass({  render: function() {    return <h1>      Hello {this.props.name}    </h1><p>      some text    </p>;  }});

复制代码

另外，可以将 ref=“mytextinput”添加到输入和添加控制台。登录 handlechange（this.Refs[“mytextinput”].Props）；打印虚拟 DOM 的属性值以发现秘密。

DOM 节点

组件不是真正的 DOM 节点，而是内存中存在的数据结构，称为虚拟 DOM。只有当它被插入到文档中时，它才会成为真正的 dom。根据 react 的设计，所有 DOM 更改将首先发生在虚拟 DOM 上，然后实际更改将反映在真实 DOM 上。这种算法称为 DOM-diff，它可以极大地提高网页的性能。

var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(  <div>    {      nemes.map(function(name) {        return <div>Hello, {name}!</div>      })    }  </div>,  document.getElementById('example'))

复制代码

React 为每个状态提供两个处理功能。在进入状态之前调用 will 函数，在进入状态之后调用 did 函数。三种状态下有五种处理功能。

   -   componentWillMount()   -   componentDidMount()   -   componentWillUpdate(object, nextProps, object nextState)   -   componentDidUpdate(object, prevProps, object prevState)   -   componentWillUnmount()

复制代码

Mounting：已插入真实 DOMUpdating：正在被重新渲染 Unmounting：已移出真实 DOM

state 和 render

状态属性包含定义组件所需的一些数据。当数据更改时，将调用 render 来再现渲染。只能通过 setstate 方法更新数据。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/4cd1ea1d047d1752e42f07be4】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

React 在实际开发中 Variables 与 Prop 的实战运用

Variables

Prop

生命周期

DOM 节点

state 和 render

黎燃

评论