React関連の紹介

特徴

1. ユーザーインターフェイスを構築するための JavaScript ライブラリ
2. Facebook によって作成
3. コンポーネント化、一方向データフロー、ライフサイクル、仮想 dom、フックなど

jsx 構文

jsx 構文は、JavaScript と html を混合した記述方法である js で html テンプレートを記述する場合に便利です。簡単に言えば、jsx は html と js を組み合わせたものです。
特徴:
1. ルート ノードは 1 つだけです
2. {} で js 式を囲みます
3. {/ comment content/ }
4. classNmae でクラス名を定義します
5. スタイル オブジェクトは自動的に作成されます6. 配列には
html を含めることができ、自動的に展開されます。

// 导入css
import './App.css'
// 定一个样式对象
var styles={
    
    
  fontSize:"48px",
  textAlign:"center",
  color:"green"
}
// 定义一个数组
var arr=[
  <h2>我是老大</h2>,
  <p>p标签</p>,
  <a href='http://www.baidu.com'>百度</a>
]
// 创建App实例
function App(){
    
    
  // 返回一段html节点
  return <div>
    <h1 className="active">你好react</h1>
    <p style={
    
    styles}>学好react,月薪过两万</p>
    {
    
    arr}
   {
    
    /*<p>{2+4}</p>
    <p>{5>10?"大于10":"他还是一个孩子"}</p>*/} 
  </div>
}
// 导出
export default App;

インポートされた CSS ファイル App.css

.active{
    
    
  background-color: #f70;
  color: #fff;
}

React コンポーネントの状態/データ
this.setState({k: new value})
状態が変化すると、その状態を参照するビューが自動的に更新されます

コンポーネントに反応する

機能コンポーネント、クラスコンポーネント
1. 機能コンポーネント

function App(){
    
    
    return (
        <div>
            {
    
    /* 页面渲染 */}
        </div>
    )
}
export default App;

2. クラスのコンポーネント

// 导入组件
import React,{
    
    Component} from "react";
// 创建一个class类
class App extends Component{
    
    
    // 类的构造函数
    constructor(props){
    
    
        // 调用父组件构造函数
        super(props);
        // 自定义 状态数据
        this.state={
    
    num:5}
    }
    // 渲染内容
    render(){
    
    
        return <div>
            <h1>App</h1>
            <p>{
    
    this.state.num}</p>
        </div>
    }
}
// 导出App组件
export default App;

機能コンポーネントとクラスコンポーネントの違い
1. 機能コンポーネントは通常表示され、クラスコンポーネントは通常コンテナとして使用されます。
2. クラス コンポーネントは状態を持つことができますが、関数コンポーネントは状態を持たず、クラス コンポーネントはデータの管理に使用されます。
3. 関数コンポーネントにはこれがありませんが、クラスコンポーネントにはこれがあります。
4. 関数コンポーネントにはライフサイクルがありませんが、クラスコンポーネントにはライフサイクルがあります。

テンプレートの構文

1. テキスト レンダリング
{} にはテキスト コンテンツが含まれます
。HTML テキストにはタグを認識するために「dangerouslySetInnerHTML」を追加する必要があります。
2. 条件付きレンダリング
3. リスト レンダリング

function App(){
    
    
    var isLog=true;
    var list=["react","vue","jQuery","angular"];
    var str1="我爱我的故乡";
    var str2= "<p>我爱<strong>我家</strong></p>"
    return (<div>
        <div>{
    
    str1}</div>
          {
    
    /* html文本渲染   __html包含两个下划线 */}
        <div dangerouslySetInnerHTML={
    
    {
    
    __html:str2}}></div>
        <h1>列表渲染</h1>
        {
    
    
            list.map(item=>(<p key={
    
    item}>{
    
    item}</p>))
        }
        <h1>模板语法-条件渲染</h1>
        {
    
    isLog&&<h3>欢迎回来</h3>}
        {
    
    isLog?<h3>欢迎回来主人</h3>:<h3>请登录</h3>}
    </div>)
}
export default App

イベント

1. ネイティブ JS イベントと一致し、イベント名はキャメル ケースで表示されます (右側はキャメル ケースで名前が付けられます)
onclick onClick
onmouseover onMouseover
2. イベントは常に関数に応答します。

import React, {
    
     Component } from 'react';// imrc
class App extends Component {
    
     // ccc
    constructor(props) {
    
    
        super(props);
        this.state={
    
    num:5}
    }
    say=()=>{
    
    
        alert("中华文化博大精深")
    }
    doit=(msg)=>{
    
    
        alert("我爱"+msg)
    }
    add=(n=1)=>{
    
    
        // state更新必须由setState方法进行
        this.setState({
    
    num:this.state.num+n})
    }
    state = {
    
      }
    render() {
    
     
        return ( <div>
            <h1>更新状态state</h1>
            <button onClick={
    
    this.add.bind(this,5)}>{
    
    this.state.num}:传参5</button>
            <button onClick={
    
    ()=>{
    
    this.add(2)}}>{
    
    this.state.num}:传参</button>
            <button onClick={
    
    ()=>this.add()}>{
    
    this.state.num}</button>
            <h1>添加事件</h1>
            <p onClick={
    
    this.doit.bind(this,"河南")}>河南-传参</p>
            <p onClick={
    
    ()=>this.doit("祖国")}>祖国-传参</p>
            <p onClick={
    
    this.say}>钓鱼岛</p>
            <p onClick={
    
    ()=>alert("坐高铁去拉萨")}>风景好美</p>
            <p><button>{
    
    this.state.num}</button></p>
           </div> );
    }
}
 // this.doit.bind(this,"河南")
 // 基于doit返回一个新的函数,新函数的this是bind的第一个参数,新函数的参数是bind的第二个参数
export default App;

フォームデータバインディング

import React, {
    
     Component } from 'react'
class App extends Component {
    
    
    // constructor(props) {
    
    
    //     super(props);
    // }
    state = {
    
     
        msg:'你好react'
     }
     // 用箭头函数保障this正确性
     // 事件对象(input)对象对应的值
     updateMsg=e=>this.setState({
    
    msg:e.target.value})
    render() {
    
     
        return ( 
            <div>
                <h1>表单数据的绑定</h1>
                <p>{
    
    this.state.msg}</p>
                {
    
    /* value与onChange都应该同时绑定 */}
                <input 
                type="text" 
                value={
    
    this.state.msg}
                onChange={
    
    this.updateMsg}
                />
            </div>
         );
    }
}
export default App;

コンポーネント

1. コンポーネントを定義します (コンポーネント名の最初の文字は大文字にする必要があります)
ここに画像の説明を挿入
2. App.js にコンポーネントをインポートします

import Steper from './components/Steper'

3. App.jsのレンダリング関数で使用する

render() {
    
     
        return ( <div>
            <Steper ></Steper><
        </div> );
    }

関数パラメータ

1. 親から子、
親コンポーネントへprops

を渡す 子コンポーネントは
props.numを受け取る
2. 子から親へ渡し、親コンポーネントから渡されたpropsのコールバック関数を実行 子
から親:コールバック関数を実行
親コンポーネント:
関数を定義そして関数を子コンポーネントに渡します
updateSize=(n)=>this.setState({size:n})

サブコンポーネント:
props.updateSize() の実行は、親コンポーネントStepper App.js
の updateSize メソッドの実行と同等です。

 import React,{
    
    Component} from 'react'
// 导入组件
import Steper from './components/Steper'
class App extends Component {
    
    
    state = {
    
     
        msg:'',
        size:100,
        min:1,
        max:110,
     };
     // 父组件定义一个更新size的
    updateSize=n=>this.setState({
    
    size:n})
    render() {
    
     
        return ( <div>
            {
    
    /* 把方法通过props方式传递给子组件 */}
            <Steper
            updateSize={
    
    this.updateSize}
            num={
    
    this.state.size}
            min={
    
    this.state.min}
            max={
    
    this.state.max}
            ></Steper><br/>
            {
    
    /* <Steper num={10}></Steper><br/>
            <Steper></Steper> */}
            <div
            style={
    
    {
    
    border:"1px solid red",
            width:this.state.size+"px",
            height:this.state.size+"px",
            }}
            >
                {
    
    this.state.size}
            </div>
        </div> );
    }
}
 
export default App;

Steper.js

import React, {
    
     Component } from 'react'
class Steper extends Component {
    
    
    constructor(props) {
    
    
        super(props);
        this.state = {
    
     
            // count的默认值是props的num值
            count:props.num,
            mins:props.min,
            maxs:props.max
         }
    }
    // 给表单定义双向绑定
    updateCount=e=>{
    
    
        this.setState({
    
    count:e.target.value})
          // 执行父组件的updateSize方法
    this.props.updateSize(e.target.value)
    }
    render() {
    
     
        return ( <span>
            <button 
            disabled={
    
    this.state.count<=this.state.mins}
            onClick={
    
    ()=>{
    
    
                this.setState({
    
    count:this.state.count*1-1},()=>{
    
    
                    // 更新完毕,执行props.updateSize
                    this.props.updateSize(this.state.count)
                })
            }}
            >-</button>
            <input 
            type="text" 
            onChange={
    
    this.updateCount}
            value={
    
    this.state.count} />
            <button 
            disabled={
    
    this.state.count>=this.state.maxs}
            onClick={
    
    ()=>{
    
    
                this.setState({
    
    count:this.state.count*1+1},()=>{
    
    
                    // 更新完毕,执行props.updateSize
                    this.props.updateSize(this.state.count)
                })
            }}
            >+</button>
             
        </span> );
    }
}
// 定义默认参数
Steper.defaultProps={
    
    
    num:1
}
export default Steper;
// 首字母要求大写

分析する
ここに画像の説明を挿入
ここに画像の説明を挿入

ビルドデザイン

1. コンテナの構成要素ページ、ステート付き
コンテナ、ステート処理メソッドデータセンター、データ処理センタークラスコンポーネント2. ビューコンポーネント表示コンテンツ、ビューコンポーネントはステート関数コンポーネントを含まないプロパティのみ






ドムリファレンス


1. dom 参照メソッドimport {createRef} を 'react' からインポートして作成します
。 2. dom 参照
var inp=createRef()を作成します
。 3. 参照

4.現在参照されている dom ノード
inp.current.value の値を取得します。

例:

import {
    
    createRef} from 'react';
// 创建一个dom引用
var inp=createRef();
function Item(props){
    
    
    // 勾选时候,执行组件的updateitem
    function updateItem(e){
    
    
        // 执行props的OnUpdateItem(原来的item,最新item)
        props.onUpdateItem(props.item,{
    
    ...props.item,done:e.target.checked});
    }
    // 双击编辑功能
    // 确定编辑
    function sureEdit(){
    
    
        // 单击确定 更新item把状态变成1
        // 把item的title值更新inp的值
        // 更新item
        props.onUpdateItem(props.item,{
    
    ...props.item,status:1,title:inp.current.value})
    }
    // 取消编辑
    function cancleEdit(){
    
    
        // 单击取消 把状态改为1,回到正常状态
        props.onUpdateItem(props.item,{
    
    ...props.item,status:1})
    }
    // 去编辑
    function toEdit(){
    
    
        // 更新item 把状态改为2
        // 组件就会显示编辑状态
        props.onUpdateItem(props.item,{
    
    ...props.item,status:2})
        setTimeout(()=>{
    
    
            inp.current.value=props.item.title;
        },100)
    }
    return (<div>
        {
    
    props.item.status===1?<div>
            {
    
    /* 正常状态 */}
            <input type="checkbox"  checked={
    
    props.item.done} onChange={
    
    e=>updateItem(e)} />
            <span onDoubleClick={
    
    toEdit}>{
    
    props.item.title}</span>
            {
    
    /* 单击props传递过来的onDelete方法 */}
            <button onClick={
    
    ()=>props.onDelete(props.item)}>x</button>
            </div>:<div>
            {
    
    /* 编辑状态 */}
            <input ref={
    
    inp} />
            <button onClick={
    
    sureEdit}>确定</button>
            <button onClick={
    
    cancleEdit}>取消</button>
        </div>}
    </div>)
}
export default Item;
// props的数据在Item只读
// input必须绑定value和onchange绑定的 改变props
// 要是函数组件也会一个state,事件解决(hooks功能)

解体する

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/topuu/article/details/126413139