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

Posted 2022-08-26 黎燃黎燃

@[toc]

Variables

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

<img src=logo className="App-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"  />

将第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 Hello this.props.name;
  
);

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

var HelloMessage = React.createClass(
  render: function() 
    return 
      Hello this.props.name
    <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：已插入真实DOM
Updating：正在被重新渲染
Unmounting：已移出真实DOM

state和render

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