A data management library of react that uses virtual data technology and chained logic calling technology.
A interesting data management library of react that uses virtual data technology and chained logic calling technology.
log functionImmutable.js and pmflHOOKS API, currently only supports React v16.8.1import React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.delimit("count").delimit("countPlus").delimit("step")
.set(fro.constant.step,1)
.involve(fro.constant.count, useState(0))
.add((data, constant, state) => {
return { [constant.count]: state.count + state.step }
},fro.constant.countPlus)
return <div>
<p>{fro.state.count}</p>
<button onClick={() => { fro.logic.countPlus(null,true,5).apply(true, "count")}}>plus 5</button>
</div >
}
export default App;
It is recommended to use yarn for installation.
yarn add react-fro
Or
npm i react-fro --save
fro.delimit(str, const_data) function, and the value of the data in the object cannot be changed.fro.add(func, other_name) method to add a logical function to this object.fro.mix(func, other_name) method.react rendering, initialize the data of this object by fro.involve(str, data_array) method, and synchronize the virtual data by fro.logic.apply(condition, ...args) method. Object.fro.affect(func, other_name) method to add a function containing side effects to this object.react specific ref data, which is initialized by the fro.link(str, dom) method.fro.logic object.func: Function This function is a function of the custom business added to the fro.logic object. There are two data objects inside fro, which are virtual data and real data. This function has three parameters, data, constant (equivalent to fro.constant) and state (this parameter is the virtual data object virtual_state in the fro object). The return value of this parameter can take two forms, an array or an object. When the return value is an array, the even-numbered element of the array is used as the key of the virtual data, and the odd-numbered element is used as the value of the virtual data, and is supplied to the virtual_state object of the fro. This object is provided directly to the virtual_state object when the return value is an object.other_name: String This parameter is optional. The function name of the func: Function parameter is overridden when this parameter is present. If func: Function is an anonymous function, this parameter must exist.fro.logic object contains three parameters, data, condition, times.data: Any The first argument passed to the function in fro.logic represents user-defined data, usually an object or array type.condition: Function/Boolean The second argument passed to the function in fro.logic, which is true or the return value of this function is true, the function can execute the predefined logic; otherwise, the function returns directly without executing logic. The function logic is executed by default when the parameter does not exist.times: Number The third parameter passed to the function in fro.logic represents the number of executions of the logic function. When this parameter is less than 1, it is executed only once; when this parameter is a decimal, the number of integer parts is executed.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.add(count_plus)
.add((data, constant, state)=>["count2",data], "set_count")
.involve("count1",useState(0)).involve("count2", useState(0))
function count_plus(data, constant, state) {
return { count1: state.count1 + 1 }
}
return <div>
<p>{fro.state.count1}</p>
<button onClick={()=>{fro.logic.set_count(10).count_plus(null,true,5).apply()}}>count2 to be 10 and count1 plus 5</button>
<p>{fro.state.count2}</p>
<button onClick={()=>{fro.logic.set_count(101).apply()}}>set_count</button>
</div>
}
export default App;
fro.mixing object that can perform both side effects and modify virtual data. This function is used when both side effects and virtual data need to be modified.func: Function This function is a function of the custom business added to the fro.mixing object. There are two data objects inside fro, which are virtual data and real data. This function has three parameters, data, constant (equivalent to fro.constant) and state (this parameter is the virtual data object virtual_state in the fro object). The return value of this parameter can take two forms, an array or an object. When the return value is an array, the even-numbered element of the array is used as the key of the virtual data, and the odd-numbered element is used as the value of the virtual data, and is supplied to the virtual_state object of the fro. This object is provided directly to the virtual_state object when the return value is an object.other_name: String This parameter is optional. The function name of the func: Function parameter is overridden when this parameter is present. If func: Function is an anonymous function, this parameter must exist.fro.mixing object contains three parameters, data, condition, times.data: Any The first argument passed to the function in fro.mixing represents user-defined data, usually an object or array type.condition: Function/Boolean is passed to the second argument of the function in fro.mixing. If the argument is true or the return value of this function is true, the function can execute the predefined logic; otherwise, the function returns directly. Do not execute logic. The function logic is executed by default when the parameter does not exist.times: Number The third parameter passed to the function in fro.mixing represents the number of executions of the logic function. When this parameter is less than 1, it is executed only once; when this parameter is decimal, the number of integer parts is executed.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.mix(count_plus)
.mix((data, constant, state)=>["count2",data], "set_count")
.involve("count1",useState(0)).involve("count2", useState(0))
function count_plus(data, constant, state) {
console.log("it's cool~")
return { count1: state.count1 + 1 }
}
return <div>
<p>{fro.state.count1}</p>
<button onClick={()=>{fro.mixing.set_count(10).count_plus(null,true,5).apply()}}>count2 to be 10 and count1 plus 5</button>
<p>{fro.state.count2}</p>
<button onClick={()=>{fro.mixing.set_count(101).apply()}}>set_count</button>
</div>
}
export default App;
fro.effect object to perform side effects.func: Function This function is a function added to the fro.effect object to perform side effects. There are two data objects inside fro, which are virtual data and real data. This function has three parameters, data, constant (equivalent to fro.constant) and state (this parameter is the virtual data object virtual_state in the fro object). This parameter has no return value and is used to perform side effects.other_name: String This parameter is optional. The function name of the func: Function parameter is overridden when this parameter is present. If func: Function is an anonymous function, this parameter must exist.fro.effect object contains three parameters, data, condition, times.data: Any The first argument passed to the function in fro.effect represents user-defined data, usually an object or array type.condition: Function/Boolean The second argument passed to the function in fro.effect, which is true or the return value of this function is true, the function can execute the predefined logic; otherwise, the function returns directly without executing logic. The function logic is executed by default when the parameter does not exist.times: Number The third parameter passed to the function in fro.logic represents the number of executions of the logic function. When this parameter is less than 1, it is executed only once; when this parameter is a decimal, the number of integer parts is executed.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.delimit("open_baidu")
.affect((data, constant, state)=>{ window.open("https:\/\/www.baidu.com")}, fro.constant.open_baidu)
return <div>
<button onClick={()=>{fro.effect.open_baidu([], true, 2)}}>open baidu 2 times</button>
</div>
}
export default App;
react renders the required data to the real data object in fro and copies the data to the virtual data object in fro.str: String The name of the data variable to be bound (key).data_array: Array The return value of the ``actState()function ofreact`, the first data is the value to be bound, and the second data is the function that can change this value.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.add((data, constant, state)=>["count",state.count + 1], "count_plus")
.involve("count", useState(20))
return <div>
<p>{fro.state.count}</p>
<button onClick={()=>{fro.logic.count_plus().apply()}}>plus 1</button>
</div>
}
export default App;
fro. When 'strexists only in virtual data, only the virtual data is changed. Ifstr` is also present in the real data, the virtual data and the real data are changed. It is not recommended in general, it is recommended to use with asynchronous functions.str: String The key of the data variable to be set.set_data: Any The value of the data variable to be set.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.involve("count", useState(0))
return <div>
<p>{fro.state.count}</p>
<button onClick={() => { fro.set("count", fro.state.count + 10) }}> plus 10</button>
</div >
}
export default App;
fro.constant object. All data in this object is constant and cannot be changed.str: String The name of the constant to be defined.const_data: Any Optional parameter, the value of the constant to be defined. When this parameter does not exist, the constant name and constant value are both str parameters.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.delimit("count").delimit("count_plus")
.delimit("condition_func", (constant, state) => {
if(state.count === 5){
return false
}
else{
return true
}
})
.add((data, constant, state) => {
return [constant.count, state.count + 1]
}, fro.constant.count_plus)
.involve(fro.constant.count, useState(0))
return <div>
<p>{fro.state.count}</p>
<button onClick={()=>{fro.logic.count_plus({}, fro.constant.condition_func, 1).apply()}}>count plus 1 until 5</button>
</div>
}
export default App;
ref data of react to the fro.ref object.str: String Bind the variable name of ref.dom：Ref ref data.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.delimit("input")
return <div>
<button onClick={()=>{fro.ref.input.focus()}}>focus input</button>
<input type="text" ref={(input)=>fro.link(fro.constant.input, input)}/>
</div>
}
export default App;
fro-owned functions to prevent memory leaks when the react component is destroyed.str: String The name to be tagged is generally the same as the component name.marked_frofro.mark(str) function to prevent memory leaks when the react component is destroyed.str: StringThe name of the data group to be destroyed, generally the same as the component name.froimport React from 'react';
import { useState, useEffect } from 'react';
import fro from 'react-fro'
function App(props) {
fro.mark("App").add(count_plus)
.add((data, constant, state)=>["count2",data], "set_count")
.involve("count1",useState(0)).involve("count2", useState(0))
function count_plus(data, constant, state) {
return { count1: state.count1 + 1 }
}
useEffect(() => {
return function clean_up() {
fro.uninstall("App")
}
}, [])
return <div>
<p>{fro.state.count1}</p>
<button onClick={()=>{fro.logic.set_count(10).count_plus(null,true,5).apply()}}>count2 to be 10 and count1 plus 5</button>
<p>{fro.state.count2}</p>
<button onClick={()=>{fro.logic.set_count(101).apply()}}>set_count</button>
</div>
}
export default App;
str: String Optional parameters. When the values are constant, ref, logic, mixing, effect, state, virtual_state, marked_data, the data of these seven objects are output separately. When the value is other or non-existent, all objects are output. The data.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.delimit("input").set("count", 20).involve("count2", useState(0))
.add((data, constant, state)=>{}, "test_func")
.affect((data, constant, state) => {}, "test_effect")
return <div>
<button onClick={()=>{
fro.log()
}}>show log</button>
<input type="text" ref={(input)=>fro.link(fro.constant.input,input)}/>
</div>
}
export default App;
apply, the variables shared by the virtual data object and the real data object, overwrite the real data with the virtual data, and trigger the re-rendering of the react page.condition? :Function / Boolean An optional parameter that determines whether this function is actually executed. When the type of this parameter is function, it contains two parameters, constant (equivalent to fro.constant) and state (this parameter is the virtual data object virtual_state in the fro object. ), returns a value of type Boolean. When this parameter is true or the return value is true, the fro.logic.apply (condition,... args) function runs. When this parameter is empty, this function is executed by default.args?: Array<String> An optional parameter that loads the data variable name that needs to be overwritten with virtual data to the real data. When the lengths of args is 0, all the changed virtual data is overwritten to the real data; in other cases, only the specific data is overwritten.fro.logicimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.add((data, constant, state)=>["count",state.count + 1], "set_count")
.involve("count", useState(0))
return <div>
<p>{fro.state.count}</p>
<button onClick={()=>{fro.logic.set_count().apply()}}>plus 1</button>
<button onClick={()=>{fro.logic.set_count().apply(null)}}>no change</button>
<button onClick={()=>{fro.logic.set_count().apply((constant, state)=>true, "count")}}>plus 1 too</button>
</div>
//If the apply function is not called here, the page will not change.
}
export default App;
fro object.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.set("num",10)
.add((data, constant, state)=>["count", state.num], "set_count")
.involve("count", useState(0))
return <div>
<p>{fro.state.count}</p>
<button onClick={()=>{fro.logic.set_count().apply().back().log()}}>to be 10 and show log</button>
</div>
}
export default App;
apply, the variables shared by the virtual data object and the real data object, overwrite the real data with the virtual data, and trigger the re-rendering of the react page.condition?: Function/Boolean An optional parameter that determines whether this function is actually executed. When the type of this parameter is Function, it contains two parameters, constant (equivalent to fro.constant) and state (this parameter is the virtual data object virtual_state in the fro object. ), returns a value of type Boolean. When this parameter is true or the return value is true, the fro.mixing.apply(condition, ...args) function runs. When this parameter is empty, this function is executed by default.args?: Array<String> An optional parameter that loads the data variable name that needs to be overwritten with virtual data to the real data. When the lengths of args is 0, all the changed virtual data is overwritten to the real data; in other cases, only the specific data is overwritten.fro.mixingimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.mix((data, constant, state)=>["count",state.count + 1], "set_count")
.involve("count", useState(0))
return <div>
<p>{fro.state.count}</p>
<button onClick={()=>{fro.mixing.set_count().apply()}}>plus 1</button>
<button onClick={()=>{fro.mixing.set_count().apply(null)}}>no change</button>
<button onClick={()=>{fro.mixing.set_count().apply((constant, state)=>true, "count")}}>plus 1 too</button>
</div>
//If the apply function is not called here, the page will not change.
}
export default App;
fro object。froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.set("num",10)
.add((data, constant, state)=>["count", state.num], "set_count")
.involve("count", useState(0))
return <div>
<p>{fro.state.count}</p>
<button onClick={()=>{fro.mixing.set_count().apply().back().log()}}>to be 10 and show log</button>
</div>
}
export default App;
fro object.froimport React from 'react';
import { useState } from 'react';
import fro from 'react-fro'
function App(props) {
fro.delimit("open_baidu")
.affect((data, constant, state)=>{ window.open("https:\/\/www.baidu.com")}, fro.constant.open_baidu)
return <div>
<button onClick={()=>{fro.effect.open_baidu([], true, 2).back().log()}}>open baidu 2 times and show log</button>
</div>
}
export default App;
MIT
FAQs
A data management library of react that uses virtual data technology and chained logic calling technology.
The npm package react-fro receives a total of 0 weekly downloads. As such, react-fro popularity was classified as not popular.
We found that react-fro demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.