React.jsの使い方は？ React.js の簡単な使い方の紹介 (例付き)

function Button (props) {
  // 这里返回一个 DOM元素，例如：
  return {props.label};
}
// 将按钮组件呈现给浏览器
ReactDOM.render(, mountNode)

function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
} 
// 要使用 Button，你可以这么做
ReactDOM.render(
  React.createElement(Button, { label:"Save" }),
  mountNode
);

const InputForm = React.createElement(
  "form",
  { target: "_blank", action:"https://google.com/search" },
  React.createElement("p",null, "Enter input and click Search"),
  React.createElement("input", {className: "big-input" }),
  React.createElement(Button, { label:"Search" })
);
// InputForm 使用 Button组件，所以我们需要这样做：
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// 然后我们可以通过 .render方法直接使用 InputForm
ReactDOM.render(InputForm, mountNode);

const InputForm =
  

    
Enter input and clickSearch
    
    
  ;
// InputForm “仍然”使用 Button 组件，所以我们也需要这样。
// JXS 或者普通的表单都会这样做
function Button (props) {
  // 这里返回一个 DOM元素。例如：
  return {props.label};
}
// 然后我们可以直接通过 .render使用 InputForm
ReactDOM.render(InputForm, mountNode);

const RandomValue = () =>
  

    { Math.floor(Math.random() * 100)}
  
;
// 使用：
ReactDOM.render(,mountNode);

const ErrorDisplay = ({message}) =>
  

    {message}
  
;
// 使用
ReactDOM.render(
  ,
  mountNode
);

const MaybeError = ({errorMessage}) =>
  

    {errorMessage &&}
  
;
// MaybeError 组件使用 ErrorDisplay组件
const ErrorDisplay = ({message}) =>
  

    {message}
  
;
// 现在我们使用 MaybeError组件：
ReactDOM.render(
  0.5 ? 'Not good' : ''}
  />,
  mountNode
);

const Doubler = ({value=[1, 2, 3]}) =>
  

    {value.map(e => e * 2)}
  
;
// 使用下面内容 
ReactDOM.render(, mountNode);

class Button extends React.Component {
  render() {
    return{this.props.label};
  }
}
// 使用（相同的语法）
ReactDOM.render(, mountNode);

例 10：自定义组件实例

我们也可以定义类的原型并且在任何我们希望的地方使用，包括在返回的 JSX输出的内部：

class Button extends React.Component {
  clickCounter = 0;
  handleClick = () => {
    console.log(`Clicked: ${++this.clickCounter}`);
  }
  render() {
    return (
      
        {this.props.label}
      
    );
  }
}
// 使用
ReactDOM.render(, mountNode);

例 11：使用类的属性（通过单击保存按钮进行测试）

注意上述例 11 中的几件事情

handleClick 函数使用 JavaScript 新提出的 class-field syntax 语法。这仍然是 stage-2，但是这是访问组件安装实例（感谢箭头函数）最好的选择（因为很多原因）。然而，你需要使用类似 Babel 的编译器解码为 stage-2（或者仅仅是类字段语法）来让上述代码工作。 jsComplete REPL 有预编译功能。

// 错误：

onClick={this.handleClick()}

// 正确：

onClick={this.handleClick}

5、React中的事件：两个重要的区别

当处理 React 元素中的事件时，我们与 DOM API 的处理方式有两个非常重要的区别：

所有 React 元素属性（包括事件）都使用 camelCase 命名，而不是 lowercase。例如是 onClick 而不是 onclick。

我们将实际的 JavaScript 函数引用传递给事件处理程序，而不是字符串。例如是 onClick={handleClick} 而不是onClick="handleClick"。

React 用自己的对象包装 DOM对象事件以优化事件处理的性能，但是在事件处理程序内部，我们仍然可以访问 DOM对象上所有可以访问的方法。React 将经过包装的事件对象传递给每个调用函数。例如，为了防止表单提交默认提交操作，你可以这样做：

class Form extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted');
  };
  render() {
    return (
      
        Submit
      
    );
  }
}
// 使用
ReactDOM.render(
, mountNode);

例 12：使用包装过的对象

6、每一个 React组件都有一个故事：第 1 部分

以下仅适用于类组件（扩展 React.Component）。函数组件有一个稍微不同的故事。

首先，我们定义了一个模板来创建组件中的元素。

然后，我们在某处使用 React。例如，在 render 内部调用其他的组件，或者直接使用 ReactDOM.render。

然后，React 实例化一个对象然后给它设置 props 然后我们可以通过 this.props 访问。这些属性都是我们在第 2 步传入的。

因为这些全部都是 JavaScript，constructor方法将会被调用（如果定义的话）。这是我们称之为的第一个：组件生命周期方法。

接下来 React 计算渲染之后的输出方法（虚拟 DOM 节点）。

因为这是 React 第一次渲染元素，React将会与浏览器连通（代表我们使用 DOM API）来显示元素。这整个过程称为 mounting。

接下来 React 调用另一个生命周期函数，称为 componentDidMount。我们可以这样使用这个方法，例如：在 DOM 上做一些我们现在知道的在浏览器中存在的东西。在此生命周期方法之前，我们使用的 DOM 都是虚拟的。

一些组件的故事到此结束，其他组件得到卸载浏览器 DOM中的各种原因。在后一种情况发生时，会调用另一个生命周期的方法，componentWillUnmount。

任何 mounted 的元素的状态都可能会改变。该元素的父级可能会重新渲染。无论哪种情况，mounted 的元素都可能接收到不同的属性集。React 的魔力就是这儿，我们实际上需要的正是 React 的这一点！在这一点之前，说实话，我们并不需要 React。

组价的故事还在继续，但是在此之前，我们需要理解我所说的这种状态。

7、React组件可以具有私有状态

以下只适用于类组件。我有没有提到有人叫表象而已的部件 dumb？

状态类是任何 React 类组件中的一个特殊字段。React 检测每一个组件状态的变化，但是为了 React 更加有效，我们必须通过 React 的另一个 API 改变状态字段，这就是我们要学习的另一个 API —— this.setState：

class CounterButton extends React.Component {
  state = {
    clickCounter: 0,
    currentTimestamp: new Date(),
  };
  handleClick = () => {
    this.setState((prevState) => {
     return { clickCounter:prevState.clickCounter + 1 };
    });
  };
  componentDidMount() {
   setInterval(() => {
     this.setState({currentTimestamp: new Date() })
    }, 1000);
  }
  render() {
    return (
      

        Click
        
Clicked:{this.state.clickCounter}
        
Time:{this.state.currentTimestamp.toLocaleString()}
      

    );
  }
}
// 使用
ReactDOM.render(,mountNode);

 例 13：setState的 API

这可能是最重要的一个例子因为这将是你完全理解 React基础知识的方式。这个例子之后，还有一些小事情需要学习，但从那时起主要是你和你的 JavaScript 技能。

让我们来看一下例 13，从类开始，总共有两个，一个是一个初始化的有初始值为 0 的 clickCounter 对象和一个从 new Date() 开始的 currentTimestamp。

另一个类是 handleClick 函数，在渲染方法中我们给按钮元素传入 onClick 事件。通过使用 setState 的 handleClick 方法修改了组件的实例状态。要注意到这一点。

另一个我们修改状态的地方是在一个内部的定时器，开始在内部的componentDidMount生命周期方法。它每秒钟调用一次并且执行另一个函数调用this.setState。

在渲染方法中，我们使用具有正常读语法的状态上的两个属性（没有专门的 API）。

现在，注意我们更新状态使用两种不同的方式：

通过传入一个函数然后返回一个对象。我们在 handleClick函数内部这样做。

通过传入一个正则对象，我们在在区间回调中这样做。

这两种方式都是可以接受的，但是当你同时读写状态时，第一种方法是首选的（我们这样做）。在区间回调中，我们只向状态写入而不读它。当有问题时，总是使用第一个函数作为参数语法。伴随着竞争条件这更安全，因为 setstate实际上是一个异步方法。

ステータスを更新するにはどうすればよいですか?更新したい値を含むオブジェクトを返します。 setState を呼び出すときは、状態からプロパティを渡すか、何も渡さないことに注意してください。 setState は渡した関数の引数 (戻り値) を既存の状態と実際にマージするため、これは全く問題ありません。そのため、setState を呼び出すときにプロパティを指定しないということは、プロパティを変更したくない (削除はしない) ことを意味します。

8、Reactは反応します

Reactの名前は、状態変化の反応に由来しています（反応はありませんが、スケジュールにもあります）。これは冗談ですが、React には Schedule という名前を付ける必要があります。

ただし、コンポーネントの状態が更新されると、私たちが肉眼で観察するのはその更新に対する反応であり、その更新はブラウザ DOM (必要に応じて) に自動的に反映されます。

レンダー関数への入力は 2 つのタイプとして考えてください:

親要素経由で渡されるプロパティ

といつでも更新できる内部プライベート状態

レンダリング関数が変更されると、出力も変更される可能性があります。

React はレンダリングの履歴を保存し、以前のものと異なるレンダリングを見つけると、それらの差を計算し、それを DOM 操作で実行される実際の DOM に効果的に変換します。

9、React はあなたのコードです

React はブラウザとの通信に使用するプロキシと考えることができます。例として、上記の現在のタイムスタンプの表示を見てみましょう。 p#timestamp 要素を見つけて更新するためにブラウザに手動でアクセスして DOM API オペレーションを毎秒呼び出す必要はなく、コンポーネントの state 属性を変更するだけで、React がブラウザとの通信作業を代わりに実行します。これが React が人気がある本当の理由だと私は信じています。私たちは Mr. Browser (そして React が話す DOM 言語の多くの方言) と話すのが好きではありません。 React は自主的に無料で私たちに渡されます。

10、すべての React コンポーネントにはストーリーがあります: パート 2

コンポーネントの状態がわかったので、その状態が変化するときのプロセスについて学びましょう。最後の概念をいくつか説明します。

コンポーネントの状態が更新されたとき、または親プロセスがコンポーネントに渡したプロパティを変更することを決定したとき、コンポーネントの再レンダリングが必要になる場合があります。

後者の場合、React は別のライフサイクル メソッド、componentWillReceiveProps を呼び出します。

状態オブジェクトまたは渡されたプロパティが変更された場合、Reactは重要な決定を下さなければなりません: コンポーネントを DOM で更新する必要があるか?このため、別の重要なライフサイクル メソッド shouldComponentUpdate が呼び出されます。このメソッドは実際的な問題であるため、レンダリング プロセスを自分でカスタマイズまたは最適化する必要がある場合は、true または false を返してこの質問に答える必要があります。

カスタム shouldComponentUpdate を使用しない場合、ほとんどの場合、React のデフォルト イベントは適切に処理されます。

まず、この時点で別のライフサイクル メソッド、componentWillUpdateが呼び出されます。 React は新しくレンダリングされた出力を計算し、最後にレンダリングされた出力と比較します。

レンダリングされた出力が以前と同じであれば、Reactは何もしません（ミスターブラウザと話す必要はありません）。

何かが異なる場合、前に見たように、React その違いをブラウザに伝えます。

いずれの場合も、アップデーターが発生すると、どのような方法であっても (同じ出力であっても)、React は最終ライフサイクル メソッド、componentDidUpdate を呼び出します。

ライフサイクルメソッドは脱出ハッチです。特別な操作を行わない場合は、これらを使用せずに完全なアプリケーションを作成できます。これらは、アプリケーションで何が起こっているかを分析し、React のパフォーマンスをさらに最適化するのに非常に便利ですUpdate

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact ユーザー マニュアル 列にアクセスして学習してください) 、ご質問がございましたら、以下にメッセージを残していただけます。

以上がReact.jsの使い方は？ React.js の簡単な使い方の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。