a pure function is a function in which the same input always gets the same output without any observable side effects.
from the definition of a pure function, the necessary conditions for a pure function can be extracted:
- pure functions accept parameters, evaluate based on parameters, and return a new object;
- there are no side effects, the calculation process does not modify the input parameters and does not modify parameters or methods outside their scope;
- the same input guarantees the same output.
let’s take a look at an example and make the following comparison:
let friend = {
firstName: 'zhang',
lastName: 'san',
age: 18
}
// Impure function: will modify the value of the variable friend outside the function
function appendMessage() {
friend.message = {
time: '2021 year',
info: 'learn React'
}
}
// Pure function: returns a new object without modifying parameters
function appendMessage(friend) {
let copyFriend = Object.assign({}, friend)
copyFriend.message = {
time: '2021 year',
info: 'learn React'
}
return copyFriend
}with the above code, the advantages of pure functions can be summarized:
- the same input must be the same output, so pure functions can be cached according to the input;
- the same input must be the same output, which guarantees the transparency of the reference;
- pure functions are completely self-sufficient, and the advantage of this is that the dependencies of pure functions are clear, so they are easier to observe and understand, and make our testing easier;
- reliable: don’t worry about side effects, can work better;
- code parallelism: arbitrary pure functions can be run in parallel because pure functions do not require access to shared memory and do not enter a competitive state because of side effects.
therefore, it is recommended to use pure functions to write functions. executing a pure function does not require worrying about what bad things it will do, it does not produce unpredictable behavior, and it does not have an impact on the outside. at any given time, the same input must produce the same output, and the use of pure functions makes it easier for us to debug and test.
array of pure functions
if a component has no state, then the output of the component will depend entirely on two parameters: and , as long as there is the same sum , then their output is absolutely the same. if you compare a component to a function, the same input (and ) will always have the same output:propscontextpropscontextpropscontext
// ...
render(){
return this.props.sayHi ? <div>Hi</div> : <span>Byebye</span>
}as shown in the code above, props are inputs, and as long as the inputs are the same, the output must also be the same.
to create a component using a pure function:
// function
function Title (props) {
return <h1>{ props.title }</h1>
}
// arrow function
const Title = ({ props }) => <div>{ props.title }</div>compare the components created using the class component approach:
// es6 class components
class Title extends React.Component {
render() {
return <h1>{this.props.title}</h1>
}
}through comparison, the writing of pure function components is simple, and the characteristics of pure function components can be seen:
- components are not instantiated, and overall rendering performance is improved;
- the component cannot access the this object;
- the component cannot access the method of the lifecycle;
- stateless components can only access the input props without side effects.
the advantages of pure function components can be summarized:
- no side effects;
- occupies less memory, and the performance of the first render is better;
- the syntax is more concise, readable, the logic is simple, the test is simple, the amount of code is small, and it is easy to reuse;
- Better performance: Because lifecycle management and state management are not required in function components, React does not require certain specific checks and memory allocations, which guarantees performance.
of course, pure function components also have their own shortcomings, which have no life cycle and no .this
usage scenarios
Pure function components are encouraged to split the originally large components as simply as possible in large projects, and in the future React will also make a series of optimizations in areas such as meaningless checking and memory allocation as it does for stateless components, so whenever possible, use stateless components as much as possible.
Pure functions do not produce unpredictable behavior, and it is recommended to write functions in a reasonable way that pure functions are chosen. Similarly, in React components, if you don’t need a local state to cache some data, and you don’t need to use lifecycle functions, you can define the current component as a pure function component, which is readable and performs better.
