diff --git a/docs/API/Through.md b/docs/API/Through.md index 665ac18..52686c6 100644 --- a/docs/API/Through.md +++ b/docs/API/Through.md @@ -14,9 +14,9 @@ Props from selected agent or whole area if bearingKey (or direct) prop is not sp ## Props -* `area`: *String*: The name of the area see [Glossary](https://react-through.js.org/glossary) +* `area`: *String*: The name of the area see [Glossary](../Glossary.md) * `bearingKey`: *String|undefined*: define which agent data is selected, or whole area data if undefined -* `direct`: *String|bool|undefined*: same as `bearingKey` but also `boolean` is allowed and `true` is replaced with `default` for [direct mapping](https://react-through.js.org/basics/direct-mapping) +* `direct`: *String|bool|undefined*: same as `bearingKey` but also `boolean` is allowed and `true` is replaced with `default` for [direct mapping](../basics/Direct.md) * `default`|`defaultValue`: *any*: default value passed to the render function if no such agent exists or in initial rendering * `children`: *function(props|area: Object)*: props from agent selected by `bearingKey` or `direct` or whole area if not specified @@ -37,13 +37,12 @@ const Agent = createAdvAgent('myarea', 'id') ### Render data from each agent separtely ```js - + { ({id, text}) =>

{text}

} - + { ({id, text}) =>

{text}

} -) ``` ### Render data using whole area diff --git a/docs/API/createAdvAgent.md b/docs/API/createAdvAgent.md index 3ceda88..c202d39 100644 --- a/docs/API/createAdvAgent.md +++ b/docs/API/createAdvAgent.md @@ -7,7 +7,9 @@ hide_title: true # `createAdvAgent(areaName, bearingPropOrBuilder)` -This factory function is identical to `createAgent()` the difference is in the processing of anonimous instances of objects created inplace on the react render stage. +This factory function is identical to `createAgent()` the difference is +in the processing of anonimous instances of objects created inplace on +the react render stage ## The problem @@ -26,23 +28,31 @@ const Component = props = { } ``` -All the variables: `element`, `array`, `object`, `function`, (but not string) contains -new unique instance of appropriate entity each time when the component is rendered. So -once a new instance is receiving that cause new rerender which becom indefinite process. +All the variables: `element`, `array`, `object`, `function`, (but not a `string`) +contains new unique instance of appropriate entity each time when the component is +rendered. So once a new instance is receiving that cause new rerender which becom +indefinite process. -This case appears only for case when through-container has through-agent as one of its -children or some of subchildren at any depths. +This case appears only for case when through-container has through-agent as one of +its children or some of subchildren at any depths. -# The two rules +Strings actually also represent itself new instance but different from point of +comparision. React state and delarative aprroach at all typicaly based on shallow +compare to figure out state changes to initiate update process. Two different +objects (and so on) are not equal `{} !== {}` even has identical content, +but string `'' == ''` are equal. So components with string props created inplace +in render stage has not this problem. -In all the case `createAdvAgent()` is preferable due to it is more efficient. -Except when one or both of the rules are satisfy. +# The rule of two conditions -The function `createAgent()` must be used instead of `createAdvAgent()` when -one of +In all the case `createAdvAgent()` is preferable due to it is more efficient, +except when this rule satisfied: -* one or more of agent prop contain new instance created each render without condition -* through-container uses same area as the one of its children through-agents +The function `createAgent()` must be used instead of `createAdvAgent()` +when match both of this conditions: + +* one or more of agent props contains new instance created each render without condition +* through-container uses same area as the one of its child through-agents ## Example @@ -72,7 +82,7 @@ const memoized = React.useMemo({}, []) } - good: because advanced agent is not this is not one of (sub)children + good: because this is not (sub)children of container with same area diff --git a/docs/API/createAgent.md b/docs/API/createAgent.md index 4eced7f..c9b821a 100644 --- a/docs/API/createAgent.md +++ b/docs/API/createAgent.md @@ -33,7 +33,10 @@ In some cases one prop is not enough flexible to unique identify agent within th For such case bearing builder function is specifing instead of name of prop: ``` -const Agent = createAgent('myarea', ({category, id}) => `${category}-${id}`) +const Agent = createAgent( + 'myarea', + ({category, id}) => `${category}-${id}` +) ... @@ -60,5 +63,6 @@ For such case container may enumerate all the area items: ## Notice The `createAgent()` is appropriate for more simple usage and prform additional checking. -For better performance consider to use advance version: [createAdvAgent()](https://react-through.js.org/api-reference/createAdvAgent) +For better performance consider to use advanced +version: [createAdvAgent()](../API/createAdvAgent.md) diff --git a/docs/API/throughDirect.md b/docs/API/throughDirect.md index c5795cc..4f0a7e8 100644 --- a/docs/API/throughDirect.md +++ b/docs/API/throughDirect.md @@ -7,7 +7,8 @@ hide_title: true # `throughDirect(areaName)` -High Order Component merge the props from default agent (when only one agent for area is exists see [direct mapping](whole area to the wrapped component props)) +High Order Component merge the props from default agent (when only one agent +in whole area is exists see [direct mapping](../basics/Direct.md)) ## Params diff --git a/docs/basics/Direct.md b/docs/basics/Direct.md index a0dbafd..690fdb6 100644 --- a/docs/basics/Direct.md +++ b/docs/basics/Direct.md @@ -26,7 +26,7 @@ export default throughDirect('indicator')(Indicator) this ballance indicator may be rendered at application top bar: ```js -const TopBar = (props) => ( +const TopBar = (props) => (
Balance USD