深さは、録音技術スタック（B）を反応させます

伝統的な値の間の1組立体

。子供の親：小道具によって

親にB子：コールバック関数は、時に親コンポーネントのコールバック関数に定義すること。そして、サブアセンブリ、サブアセンブリコールバック関数、親コンポーネントへの通信にコールバック関数を渡します。

1 。父组件中：
getTextValue（値）{ 
    この.setState（{ 
      textareaVal：値
    }）

 <TextareaWrapper JSON = { この .state.json} textareaVal = { この .state.textareaVal} toMain = { この .getTextValue.bind（本） }> </ TextareaWrapper> 

2 。子组件中：
 getTargetValue（値）{ 
    targetValueせ = 値。
    もし（targetValue.length> = 100 ）{ 
      Toast.info（この .props.json [ 'hrzzmb-000148'] || '最多输入100个字' ）
    } 
    この.setState（{  
      targetValue、
    }）。
    //値は、親テキスト入力コンポーネントに送信される
    この.props.toMain（値）
  }


 <リスト> 
            < TextareaItem 
              {... getFieldProps（ 'COUNT' ）} 
              プレースホルダ = { この .props.json [「hrzzmb -000147 '] ||' '証明の使用説明} 
              行を = {5 } 
              COUNT = {100 } 
              の値 = {} targetValue 
              のonChange = {（値）=> この.getTargetValue（値）}
             /> 
 </一覧>

C。クロス通信アセンブリステージ

あなたは、コンテックスは、父と息子のアセンブリ間のクロスレベルの通信を実現することができます。

私たちは、リストアイテムに小道具を渡されていないが、ChildContextは、親要素で定義され、最初からこのようなサブアセンブリは、ここでは色として、コンテキストの定義を取得することができ、見ることができます。しかし、それは層によって転写層を減らすことができるが、複雑なアセンブリ構造は、我々はコンテキストが渡され、そこから分かりませんがため、コンテキストの広範な使用を推奨していません正式に反応します。
これは、外部コンポーネントに依存副作用をもたらすために、混乱の犯人に適用されますリードするグローバル変数の一つです。ほとんどの場合、我々はコンテキストの使用はお勧めしません。グローバルなシーンでより良い情報が本当の意味であるというように、そのようなインタフェースのテーマとして、ユーザー情報を変更しませんコンテキストを使用してください。アプリケーションでは、コンテキストは、一般的に高次成分を使用することをお勧めします、必要に応じて、変更されにくいグローバル変数のために使用されている。
通信のコンポーネントのD.ありませんネストされた関係（パブリッシュ・サブスクライブはお勧めしません）

https://blog.csdn.net/roamingcode/article/details/81773673

2.仮想DOM

仮想DOMモデルを構築するだけでDOMタブに必要な基本的な要素を持っているために、複雑ではありません。

子ノードのラベル名、スタイル、プロパティ、イベント、およびその他の識別IDを含むノード属性

仮想DOMノードは、3種類のReactElement、ReactFragmentとReactTextに分かれてReactNode、と呼ばれています。これは、ReactElement ReactComponentElementとReactDOMElementに分け

3.ライフサイクル

通过反复试验，我们得到了组件的生命周期在不同状态下的执行顺序。
 当首次挂载组件时，按顺序执行 getDefaultProps、getInitialState、componentWillMount、
render 和 componentDidMount。
 当卸载组件时，执行 componentWillUnmount。
 当重新挂载组件时，此时按顺序执行 getInitialState、componentWillMount、render 和
componentDidMount，但并不执行 getDefaultProps。
 当再次渲染组件时，组件接受到更新状态，此时按顺序执行 componentWillReceiveProps、
shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。
当使用 ES6 classes 构建 React 组件时，static defaultProps = {} 其实就是调用内部的 getDefaultProps
方法，constructor 中的 this.state = {} 其实就是调用内部的 getInitialState 方法。
因此，源码解读的部分与用 createClass 方法构建组件一样。

父组件的componentWIllMount在其子组件的componentWillMount之前调用,而父组件的componentDidMount在其子组件的componentDidMount之后调用.

如果此时在 componentWillReceiveProps 中调用 setState，是不会触发 re-render 的，而是会进行 state 合并。且在 componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中也还是无法获取到更新后的 this.state，即此时访问的 this.state 仍然是未更新的数据，需要设置 inst.state = nextState 后才可以，因此只有在 render 和 componentDidUpdate 中才能获取到更新后的 this.state。

注意禁止在 shouldComponentUpdate 和 componentWillUpdate 中调用 setState，这会造成循环调用，直至耗光浏览器内存后崩溃。

4. 解密setState 机制

当this.setState() 被调用的时候，React 会重新调用 render 方法来重新渲染 UI。
5. fetch API

这是由 WHATWG（Web Hypertext Application Technology Working Group，网页超文本应用技术工作小组）提出的新一代浏览器 Ajax 请求标准，
目前已经获得了主流浏览器的支持。新版本的 Chrome、Firefox 和 Opera 浏览器均支持fetch API，而微软的 Edge 浏览器也正在开发对 fetch 的支持。
fetch 的用法相比于原始的 XMLHttpRequest 有着质的飞跃，比如：
fetch('/user.json').then(response => response.json())
.then(data => console.log('parsed json', data))
.catch(e => console.log("Oops, error", e));

fetch('/api/submit.json', {
method: 'POST',
body: `value=${value}`,
})
.then(response => response.json())
.then(value => {
if (value.ok) {
this.setState({ comments: fetch('/api/response.json') });
}
}));

fetch 的主要特点是运用 promise 来对请求作了包装，其语法非常简洁，也更具有语义化。考虑到兼容比较旧的浏览器，我们可以使用 GitHub 官方提供的 fetch 兼容库。

6.redux

在 Redux 中，我们并不会自己用代码来定义一个 store。取而代之的是，我们定义一个 reducer，它的功能是根据当前触发的 action 对当前应用的状态（state）进行迭代，这里我们并没有直接修改应用的状态，而是返回了一份全新的状态.Redux 提供的 createStore 方法会根据 reducer 生成 store。最后，我们可以利用 store. dispatch方法来达到修改状态的目的。

Redux 的核心是一个 store，这个 store 由 Redux 提供的 createStore(reducers[, initialState])方法生成。从函数签名看出，要想生成 store，必须要传入 reducers，同时也可以传入第二个可选参数初始化状态（initialState）。

在 Redux 里，负责响应 action 并修改数据的角色就是 reducer。reducer 本质上是一个函数，其函数签名为 reducer(previousState, action) => newState。可以看出，reducer 在处理 action 的同时，还需要接受一个 previousState 参数。所以，reducer 的职责就是根据 previousState 和
action 计算出新的 newState。

在实际应用中，reducer 在处理 previousState 时，还需要有一个特殊的非空判断。很显然，reducer 第一次执行的时候，并没有任何的 previousState，而 reducer 的最终职责是返回新的 state，因此需要在这种特殊情况下返回一个定义好的 initialState：

// MyReducer.js
const initialState = {
todos: [],
};
// 我们定义的 todos 这个 reducer 在第一次执行的时候，会返回 { todos: [] } 作为初始化状态
function todos(previousState = initialState, action) {
switch (action.type) {
case 'XXX': {
// 具体的业务逻辑
}
default:
return previousState;
}
}

Redux 中最核心的 API——createStore：
import { createStore } from 'redux';
const store = createStore(reducers);
通过 createStore 方法创建的 store 是一个对象，它本身又包含 4 个方法。
 getState()：获取 store 中当前的状态。
 dispatch(action)：分发一个 action，并返回这个 action，这是唯一能改变 store 中数据的方式。
 subscribe(listener)：注册一个监听者，它在 store 发生变化时被调用。
 replaceReducer(nextReducer)：更新当前 store 里的 reducer，一般只会在开发模式中调用该方法。
在实际使用中，我们最常用的是 getState() 和 dispatch() 这两个方法。至于 subscribe() 和replaceReducer()方法，一般会在 Redux 与某个系统（如 React）做桥接的时候使用.
7. redux与react的绑定

react-redux 提供了一个组件和一个 API 帮助 Redux 和 React 进行绑定，一个是 React 组件<Provider/> ，一个是 connect()。

<Provider/> 接受一个 store 作为props，它是整个 Redux 应用的顶层组件，而 connect() 提供了在整个 React 应用的任意组件中获取 store 中数据的功能。
8. 路由

路由嵌套

在声明路由时，path 属性指明了当前路由匹配的路径形式。若某条路由需要参数，只用简单地加上 :参数名即可。若这个参数是可选参数，则用括号套起来 (:可选参数)。

路由切换无外乎使用 hashChange 或是 history.pushState。hashChange 的方式拥有良好的浏览器兼容性，但是 url 中却多了丑陋的 /#/ 部分；而 history.pushState 方法则能给我们提供优雅的 url，却需要额外的服务端配置解决任意路径刷新的问题。

browserHistory 即 history.pushState 的实现，假如想使用 hashChange 的方式改变路由，从React Router 中使用import hashHistory 即可。

深さは、録音技術スタック（B）を反応させます

おすすめ