предисловие
Сегодня мне посчастливилось присутствовать на собрании другой компании. Я хотел немного запутать меня в моем понимании высокоуровневых компонентов, но общий контент был не в том направлении, в котором я ожидал, поэтому после конец, я все еще Представляю, я разберусь со своим простым пониманием высокоуровневых компонентов. Надеюсь, вы все дадите рекомендации
Чтобы говорить о компонентах более высокого порядка, позвольте мне сначала представить функции более высокого порядка, чтобы их было легко понять по аналогии.
Передовойфункция:кфункциякак параметрфункция, результат возвращаетфункция.
(Спасибо кому-то за указание на ошибку, функция высшего порядка может стать функцией высшего порядка, если она удовлетворяет параметрам или возвращаемому значению, не обязательно обоим)
Передовойкомпоненты:ккомпонентыкак параметркомпоненты, результат возвращаеткомпоненты.
1. Функции высшего порядка
Функция высшего порядка (Higher Order Function), согласно определению выше в Википедии, функция, которая удовлетворяет хотя бы одному из следующих условий
- функция передана как параметр
- Возвращаемое значение является функцией
Простой пример:
function add(a,b,fn){
return fn(a)+fn(b);
}
var fn=function (a){
return a*a;
}
add(2,3,fn); //13
Есть также некоторые высокоуровневые методы, которые мы обычно используем, такие как: Map, Reduce, Filter, Sort;
И метод подключения в редуксе, который обычно используется сейчас, также является функцией более высокого порядка.
Примечание: вначале я не знал, что эти часто используемые методы на самом деле являются функциями высшего порядка.Покажите их с помощью карты.
var pow = function square(x) {
return x * x;
};
var array = [1, 2, 3, 4, 5, 6, 7, 8];
var newArr = array.map(pow); //直接传入一个函数方法
var newArr = array.map((item) => {return item * item}); //里面运用一个函数
//返回的一个函数
alert(newArr); // [1, 4, 9, 16, 25, 36, 49, 64]
каррирование функций
В компьютерных науках каррирование (англ. Currying), также переводимое как каррирование или гарринг, представляет собой преобразование функции, которая принимает несколько параметров, в функцию, которая принимает один параметр (первый параметр исходной функции). возвращает новую функцию, которая принимает оставшиеся аргументы и возвращает результат.
Насколько я понимаю, функции в функции передаются поэтапно, и я сам написал очень простой пример.
var add = function(x) {
return function(y) {
return function(z){
console.log('curr',x,y,z)
return x+y+z;
};
};
};
console.log(add(1)(5)(5));//传三个参数
///currying 1 5 5
//11
console.log(add(1)(5));//如果传两个参数，则会把第三个函数返回出来
/*ƒ (z) {
console.log('currying', x, y, z);
return x + y + z;
}
*/
//如果多传则会报错
Поэтому я использую карри относительно мало. По какой-то причине я думаю, что каштан выше немного странный, поэтому я снова попробовал следующий каштан, который может передавать параметры бесконечно;
var add = function(action) {
var sumFun = function(doing){
var sum = '';
if(action == 'sum'){
console.log('befor',sum)
if(doing){
sum = doing;
}else{
sum = 'nothing'
}
}
console.log('lastSum='+sum);
return sumFun ;
}
return sumFun ;
};
add('sum')(2)(3)();//2 3 nothing;
add('sum')(2)(3)(4)(5);// 2 3 4 5
Написание в ES6 на самом деле будет яснее
var add2 = x => y => x+y;
var add3 = add2(2)
console.log('add2',add2(2)) //返回一个方法，不调用后面的函数
console.log('add3',add3(5)) //7
// 分步传参，第二次调用时才会去执行函数。
Резюме (в моем понимании): Каррированная функция — это функция, которая передает параметры шаг за шагом.Вы можете передать параметры заранее, не давая ему выполнить содержимое, но вызвать функцию, когда параметры будут удовлетворены. Чувства можно использовать для вынесения неизвестных суждений.
2. Компоненты высокого уровня
Компонент более высокого порядка — это компонент React, который является оболочкой для другого компонента React.
// It's a function...
function myHOC() {
// Which returns a function that takes a component...
return function(WrappedComponent) {
// It creates a new wrapper component...
class TheHOC extends React.Component {
render() {
// And it renders the component it was given
return <WrappedComponent {...this.props} />;
}
}
// Remember: it takes a component and returns a new component
// Gotta return it here.
return TheHOC;
}
}
Как показано на рисунке, компонент более высокого порядка является чистой функцией. Примите параметр компонента, а затем верните компонент взамен. Используется для «упаковки» двух одинаковых компонентов? (не знаю, подходит ли это слово) Затем пишем публичную часть в компоненте более высокого порядка и передаем компоненту.
Возьмем хороший пример
//Welcome 组件
import React, {Component} from 'react'
class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>welcome {this.state.username}</div>
)
}
}
export default Welcome;
//goodbye 组件
import React, {Component} from 'react'
class Goodbye extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>goodbye {this.state.username}</div>
)
}
}
export default Goodbye;
Из вышеизложенного видно, что хотя функции этих двух компонентов различны, они имеют много одинаковых кодов, из-за чего они кажутся очень избыточными. Итак, мы можем сделать компонент более высокого порядка для интеграции.
import React, {Component} from 'react'
export default (WrappedComponent) => {
class NewComponent extends Component {
constructor() {
super();
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return <WrappedComponent username={this.state.username}/>
}
}
return NewComponent
}
Затем вызовите компоненты более высокого порядка отдельно
//高阶的Welcome组件
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Welcome extends Component {
render() {
return (
<div>welcome {this.props.username}</div>
)
}
}
Welcome = wrapWithUsername(Welcome);
export default Welcome;
//高阶的goodbye组件
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Goodbye extends Component {
render() {
return (
<div>goodbye {this.props.username}</div>
)
}
}
Goodbye = wrapWithUsername(Goodbye);
export default Goodbye;
Уведомление
1. Официальная рекомендация - не устанавливать значение состояния в старшем компоненте, при передаче значения можно использовать метод props. 2. Старайтесь не менять исходные компоненты, а комбинировать их.
Адрес поста в блоге для справки:Каррирование в JS - Чжан Синьсюй
React Higher Order Components (перевод)
Помочь вам полностью понять React Higher Order Components