ReactJS中的空函数
我目前正在阅读一篇教程，它实际上只是关于如何在ReactJS中创建日历的代码，其中包含许多空函数。您可以在下面找到代码：ReactJS中的空函数,reactjs,Reactjs,我目前正在阅读一篇教程，它实际上只是关于如何在ReactJS中创建日历的代码，其中包含许多空函数。您可以在下面找到代码： var Calendar = React.createClass({ calc: function (year, month) {}, componentWillMount: function () {}, componentDidMount: function () {}, componentDidUpdate: function (prev
var Calendar = React.createClass({
calc: function (year, month) {},
componentWillMount: function () {},
componentDidMount: function () {},
componentDidUpdate: function (prevProps, prevState) {},
getPrev: function () {},
getNext: function () {},
selectDate: function (year, month, date, element) {},
render: function () {
return (
//some code
);
}
});
var Header = React.createClass({
render: function () {}
});
/**
* React Calendar Component v0.1.1
*
* Copyright 2016, Dimitar Ivanov
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
var Calendar = React.createClass({
displayName: 'Calendar',
calc: function (year, month) {
if (this.state.selectedElement) {
if (this.state.selectedMonth != month || this.state.selectedYear != year) {
this.state.selectedElement.classList.remove('r-selected');
} else {
this.state.selectedElement.classList.add('r-selected');
}
}
return {
firstOfMonth: new Date(year, month, 1),
daysInMonth: new Date(year, month + 1, 0).getDate()
};
},
componentWillMount: function () {
this.setState(this.calc.call(null, this.state.year, this.state.month));
},
componentDidMount: function () {},
componentDidUpdate: function (prevProps, prevState) {
if (this.props.onSelect && prevState.selectedDt != this.state.selectedDt) {
this.props.onSelect.call(this.getDOMNode(), this.state);
}
},
getInitialState: function () {
var date = new Date();
return {
year: date.getFullYear(),
month: date.getMonth(),
selectedYear: date.getFullYear(),
selectedMonth: date.getMonth(),
selectedDate: date.getDate(),
selectedDt: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
startDay: 1,
weekNumbers: false,
minDate: this.props.minDate ? this.props.minDate : null,
disablePast: this.props.disablePast ? this.props.disablePast : false,
dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
monthNamesFull: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
firstOfMonth: null,
daysInMonth: null
};
},
getPrev: function () {
var state = {};
if (this.state.month > 0) {
state.month = this.state.month - 1;
state.year = this.state.year;
} else {
state.month = 11;
state.year = this.state.year - 1;
}
Object.assign(state, this.calc.call(null, state.year, state.month));
this.setState(state);
},
getNext: function () {
var state = {};
if (this.state.month < 11) {
state.month = this.state.month + 1;
state.year = this.state.year;
} else {
state.month = 0;
state.year = this.state.year + 1;
}
Object.assign(state, this.calc.call(null, state.year, state.month));
this.setState(state);
},
selectDate: function (year, month, date, element) {
if (this.state.selectedElement) {
this.state.selectedElement.classList.remove('r-selected');
}
element.target.classList.add('r-selected');
this.setState({
selectedYear: year,
selectedMonth: month,
selectedDate: date,
selectedDt: new Date(year, month, date),
selectedElement: element.target
});
},
render: function () {
return React.createElement(
'div',
{ className: 'r-calendar' },
React.createElement(
'div',
{ className: 'r-inner' },
React.createElement(Header, { monthNames: this.state.monthNamesFull, month: this.state.month, year: this.state.year, onPrev: this.getPrev, onNext: this.getNext }),
React.createElement(WeekDays, { dayNames: this.state.dayNames, startDay: this.state.startDay, weekNumbers: this.state.weekNumbers }),
React.createElement(MonthDates, { month: this.state.month, year: this.state.year, daysInMonth: this.state.daysInMonth, firstOfMonth: this.state.firstOfMonth, startDay: this.state.startDay, onSelect: this.selectDate, weekNumbers: this.state.weekNumbers, disablePast: this.state.disablePast, minDate: this.state.minDate })
)
);
}
});
var Header = React.createClass({
displayName: 'Header',
render: function () {
return React.createElement(
'div',
{ className: 'r-row r-head' },
React.createElement('div', { className: 'r-cell r-prev', onClick: this.props.onPrev.bind(this), role: 'button', tabIndex: '0' }),
React.createElement(
'div',
{ className: 'r-cell r-title' },
this.props.monthNames[this.props.month],
' ',
this.props.year
),
React.createElement('div', { className: 'r-cell r-next', onClick: this.props.onNext.bind(this), role: 'button', tabIndex: '0' })
);
}
});
var WeekDays = React.createClass({
displayName: 'WeekDays',
render: function () {
var that = this,
haystack = Array.apply(null, { length: 7 }).map(Number.call, Number);
return React.createElement(
'div',
{ className: 'r-row r-weekdays' },
(() => {
if (that.props.weekNumbers) {
return React.createElement(
'div',
{ className: 'r-cell r-weeknum' },
'wn'
);
}
})(),
haystack.map(function (item, i) {
return React.createElement(
'div',
{ className: 'r-cell' },
that.props.dayNames[(that.props.startDay + i) % 7]
);
})
);
}
});
var MonthDates = React.createClass({
displayName: 'MonthDates',
statics: {
year: new Date().getFullYear(),
month: new Date().getMonth(),
date: new Date().getDate(),
today: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
},
render: function () {
var haystack,
day,
d,
current,
onClick,
isDate,
className,
weekStack = Array.apply(null, { length: 7 }).map(Number.call, Number),
that = this,
startDay = this.props.firstOfMonth.getUTCDay(),
first = this.props.firstOfMonth.getDay(),
janOne = new Date(that.props.year, 0, 1),
rows = 5;
if (startDay == 5 && this.props.daysInMonth == 31 || startDay == 6 && this.props.daysInMonth > 29) {
rows = 6;
}
className = rows === 6 ? 'r-dates' : 'r-dates r-fix';
haystack = Array.apply(null, { length: rows }).map(Number.call, Number);
day = this.props.startDay + 1 - first;
while (day > 1) {
day -= 7;
}
day -= 1;
return React.createElement(
'div',
{ className: className },
haystack.map(function (item, i) {
d = day + i * 7;
return React.createElement(
'div',
{ className: 'r-row' },
(() => {
if (that.props.weekNumbers) {
var wn = Math.ceil(((new Date(that.props.year, that.props.month, d) - janOne) / 86400000 + janOne.getDay() + 1) / 7);
return React.createElement(
'div',
{ className: 'r-cell r-weeknum' },
wn
);
}
})(),
weekStack.map(function (item, i) {
d += 1;
isDate = d > 0 && d <= that.props.daysInMonth;
if (isDate) {
current = new Date(that.props.year, that.props.month, d);
className = current != that.constructor.today ? 'r-cell r-date' : 'r-cell r-date r-today';
if (that.props.disablePast && current < that.constructor.today) {
className += ' r-past';
} else if (that.props.minDate !== null && current < that.props.minDate) {
className += ' r-past';
}
if (/r-past/.test(className)) {
return React.createElement(
'div',
{ className: className, role: 'button', tabIndex: '0' },
d
);
}
return React.createElement(
'div',
{ className: className, role: 'button', tabIndex: '0', onClick: that.props.onSelect.bind(that, that.props.year, that.props.month, d) },
d
);
}
return React.createElement('div', { className: 'r-cell' });
})
);
})
);
}
});
ReactDOM.render(React.createElement(Calendar, {
//onSelect: function (state) {
//console.log(this, state);
//},
//disablePast: true,
//minDate: new Date(2016, 2, 28)
}), document.getElementById("calendar"));
空函数表示什么？如果他们什么都不做，他们怎么会有任何目的？你为什么还要把他们包括在内？还是代码不完整？在您提供的链接中，作者可能只是忘记填写这些函数 在中，它们不是空的-我复制粘贴代码：
var Calendar = React.createClass({
calc: function (year, month) {},
componentWillMount: function () {},
componentDidMount: function () {},
componentDidUpdate: function (prevProps, prevState) {},
getPrev: function () {},
getNext: function () {},
selectDate: function (year, month, date, element) {},
render: function () {
return (
//some code
);
}
});
var Header = React.createClass({
render: function () {}
});
/**
* React Calendar Component v0.1.1
*
* Copyright 2016, Dimitar Ivanov
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
var Calendar = React.createClass({
displayName: 'Calendar',
calc: function (year, month) {
if (this.state.selectedElement) {
if (this.state.selectedMonth != month || this.state.selectedYear != year) {
this.state.selectedElement.classList.remove('r-selected');
} else {
this.state.selectedElement.classList.add('r-selected');
}
}
return {
firstOfMonth: new Date(year, month, 1),
daysInMonth: new Date(year, month + 1, 0).getDate()
};
},
componentWillMount: function () {
this.setState(this.calc.call(null, this.state.year, this.state.month));
},
componentDidMount: function () {},
componentDidUpdate: function (prevProps, prevState) {
if (this.props.onSelect && prevState.selectedDt != this.state.selectedDt) {
this.props.onSelect.call(this.getDOMNode(), this.state);
}
},
getInitialState: function () {
var date = new Date();
return {
year: date.getFullYear(),
month: date.getMonth(),
selectedYear: date.getFullYear(),
selectedMonth: date.getMonth(),
selectedDate: date.getDate(),
selectedDt: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
startDay: 1,
weekNumbers: false,
minDate: this.props.minDate ? this.props.minDate : null,
disablePast: this.props.disablePast ? this.props.disablePast : false,
dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
monthNamesFull: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
firstOfMonth: null,
daysInMonth: null
};
},
getPrev: function () {
var state = {};
if (this.state.month > 0) {
state.month = this.state.month - 1;
state.year = this.state.year;
} else {
state.month = 11;
state.year = this.state.year - 1;
}
Object.assign(state, this.calc.call(null, state.year, state.month));
this.setState(state);
},
getNext: function () {
var state = {};
if (this.state.month < 11) {
state.month = this.state.month + 1;
state.year = this.state.year;
} else {
state.month = 0;
state.year = this.state.year + 1;
}
Object.assign(state, this.calc.call(null, state.year, state.month));
this.setState(state);
},
selectDate: function (year, month, date, element) {
if (this.state.selectedElement) {
this.state.selectedElement.classList.remove('r-selected');
}
element.target.classList.add('r-selected');
this.setState({
selectedYear: year,
selectedMonth: month,
selectedDate: date,
selectedDt: new Date(year, month, date),
selectedElement: element.target
});
},
render: function () {
return React.createElement(
'div',
{ className: 'r-calendar' },
React.createElement(
'div',
{ className: 'r-inner' },
React.createElement(Header, { monthNames: this.state.monthNamesFull, month: this.state.month, year: this.state.year, onPrev: this.getPrev, onNext: this.getNext }),
React.createElement(WeekDays, { dayNames: this.state.dayNames, startDay: this.state.startDay, weekNumbers: this.state.weekNumbers }),
React.createElement(MonthDates, { month: this.state.month, year: this.state.year, daysInMonth: this.state.daysInMonth, firstOfMonth: this.state.firstOfMonth, startDay: this.state.startDay, onSelect: this.selectDate, weekNumbers: this.state.weekNumbers, disablePast: this.state.disablePast, minDate: this.state.minDate })
)
);
}
});
var Header = React.createClass({
displayName: 'Header',
render: function () {
return React.createElement(
'div',
{ className: 'r-row r-head' },
React.createElement('div', { className: 'r-cell r-prev', onClick: this.props.onPrev.bind(this), role: 'button', tabIndex: '0' }),
React.createElement(
'div',
{ className: 'r-cell r-title' },
this.props.monthNames[this.props.month],
' ',
this.props.year
),
React.createElement('div', { className: 'r-cell r-next', onClick: this.props.onNext.bind(this), role: 'button', tabIndex: '0' })
);
}
});
var WeekDays = React.createClass({
displayName: 'WeekDays',
render: function () {
var that = this,
haystack = Array.apply(null, { length: 7 }).map(Number.call, Number);
return React.createElement(
'div',
{ className: 'r-row r-weekdays' },
(() => {
if (that.props.weekNumbers) {
return React.createElement(
'div',
{ className: 'r-cell r-weeknum' },
'wn'
);
}
})(),
haystack.map(function (item, i) {
return React.createElement(
'div',
{ className: 'r-cell' },
that.props.dayNames[(that.props.startDay + i) % 7]
);
})
);
}
});
var MonthDates = React.createClass({
displayName: 'MonthDates',
statics: {
year: new Date().getFullYear(),
month: new Date().getMonth(),
date: new Date().getDate(),
today: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
},
render: function () {
var haystack,
day,
d,
current,
onClick,
isDate,
className,
weekStack = Array.apply(null, { length: 7 }).map(Number.call, Number),
that = this,
startDay = this.props.firstOfMonth.getUTCDay(),
first = this.props.firstOfMonth.getDay(),
janOne = new Date(that.props.year, 0, 1),
rows = 5;
if (startDay == 5 && this.props.daysInMonth == 31 || startDay == 6 && this.props.daysInMonth > 29) {
rows = 6;
}
className = rows === 6 ? 'r-dates' : 'r-dates r-fix';
haystack = Array.apply(null, { length: rows }).map(Number.call, Number);
day = this.props.startDay + 1 - first;
while (day > 1) {
day -= 7;
}
day -= 1;
return React.createElement(
'div',
{ className: className },
haystack.map(function (item, i) {
d = day + i * 7;
return React.createElement(
'div',
{ className: 'r-row' },
(() => {
if (that.props.weekNumbers) {
var wn = Math.ceil(((new Date(that.props.year, that.props.month, d) - janOne) / 86400000 + janOne.getDay() + 1) / 7);
return React.createElement(
'div',
{ className: 'r-cell r-weeknum' },
wn
);
}
})(),
weekStack.map(function (item, i) {
d += 1;
isDate = d > 0 && d <= that.props.daysInMonth;
if (isDate) {
current = new Date(that.props.year, that.props.month, d);
className = current != that.constructor.today ? 'r-cell r-date' : 'r-cell r-date r-today';
if (that.props.disablePast && current < that.constructor.today) {
className += ' r-past';
} else if (that.props.minDate !== null && current < that.props.minDate) {
className += ' r-past';
}
if (/r-past/.test(className)) {
return React.createElement(
'div',
{ className: className, role: 'button', tabIndex: '0' },
d
);
}
return React.createElement(
'div',
{ className: className, role: 'button', tabIndex: '0', onClick: that.props.onSelect.bind(that, that.props.year, that.props.month, d) },
d
);
}
return React.createElement('div', { className: 'r-cell' });
})
);
})
);
}
});
ReactDOM.render(React.createElement(Calendar, {
//onSelect: function (state) {
//console.log(this, state);
//},
//disablePast: true,
//minDate: new Date(2016, 2, 28)
}), document.getElementById("calendar"));
在您提供的链接中，作者可能只是忘记填写这些函数 在中，它们不是空的-我复制粘贴代码：
var Calendar = React.createClass({
calc: function (year, month) {},
componentWillMount: function () {},
componentDidMount: function () {},
componentDidUpdate: function (prevProps, prevState) {},
getPrev: function () {},
getNext: function () {},
selectDate: function (year, month, date, element) {},
render: function () {
return (
//some code
);
}
});
var Header = React.createClass({
render: function () {}
});
/**
* React Calendar Component v0.1.1
*
* Copyright 2016, Dimitar Ivanov
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
var Calendar = React.createClass({
displayName: 'Calendar',
calc: function (year, month) {
if (this.state.selectedElement) {
if (this.state.selectedMonth != month || this.state.selectedYear != year) {
this.state.selectedElement.classList.remove('r-selected');
} else {
this.state.selectedElement.classList.add('r-selected');
}
}
return {
firstOfMonth: new Date(year, month, 1),
daysInMonth: new Date(year, month + 1, 0).getDate()
};
},
componentWillMount: function () {
this.setState(this.calc.call(null, this.state.year, this.state.month));
},
componentDidMount: function () {},
componentDidUpdate: function (prevProps, prevState) {
if (this.props.onSelect && prevState.selectedDt != this.state.selectedDt) {
this.props.onSelect.call(this.getDOMNode(), this.state);
}
},
getInitialState: function () {
var date = new Date();
return {
year: date.getFullYear(),
month: date.getMonth(),
selectedYear: date.getFullYear(),
selectedMonth: date.getMonth(),
selectedDate: date.getDate(),
selectedDt: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
startDay: 1,
weekNumbers: false,
minDate: this.props.minDate ? this.props.minDate : null,
disablePast: this.props.disablePast ? this.props.disablePast : false,
dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
monthNamesFull: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
firstOfMonth: null,
daysInMonth: null
};
},
getPrev: function () {
var state = {};
if (this.state.month > 0) {
state.month = this.state.month - 1;
state.year = this.state.year;
} else {
state.month = 11;
state.year = this.state.year - 1;
}
Object.assign(state, this.calc.call(null, state.year, state.month));
this.setState(state);
},
getNext: function () {
var state = {};
if (this.state.month < 11) {
state.month = this.state.month + 1;
state.year = this.state.year;
} else {
state.month = 0;
state.year = this.state.year + 1;
}
Object.assign(state, this.calc.call(null, state.year, state.month));
this.setState(state);
},
selectDate: function (year, month, date, element) {
if (this.state.selectedElement) {
this.state.selectedElement.classList.remove('r-selected');
}
element.target.classList.add('r-selected');
this.setState({
selectedYear: year,
selectedMonth: month,
selectedDate: date,
selectedDt: new Date(year, month, date),
selectedElement: element.target
});
},
render: function () {
return React.createElement(
'div',
{ className: 'r-calendar' },
React.createElement(
'div',
{ className: 'r-inner' },
React.createElement(Header, { monthNames: this.state.monthNamesFull, month: this.state.month, year: this.state.year, onPrev: this.getPrev, onNext: this.getNext }),
React.createElement(WeekDays, { dayNames: this.state.dayNames, startDay: this.state.startDay, weekNumbers: this.state.weekNumbers }),
React.createElement(MonthDates, { month: this.state.month, year: this.state.year, daysInMonth: this.state.daysInMonth, firstOfMonth: this.state.firstOfMonth, startDay: this.state.startDay, onSelect: this.selectDate, weekNumbers: this.state.weekNumbers, disablePast: this.state.disablePast, minDate: this.state.minDate })
)
);
}
});
var Header = React.createClass({
displayName: 'Header',
render: function () {
return React.createElement(
'div',
{ className: 'r-row r-head' },
React.createElement('div', { className: 'r-cell r-prev', onClick: this.props.onPrev.bind(this), role: 'button', tabIndex: '0' }),
React.createElement(
'div',
{ className: 'r-cell r-title' },
this.props.monthNames[this.props.month],
' ',
this.props.year
),
React.createElement('div', { className: 'r-cell r-next', onClick: this.props.onNext.bind(this), role: 'button', tabIndex: '0' })
);
}
});
var WeekDays = React.createClass({
displayName: 'WeekDays',
render: function () {
var that = this,
haystack = Array.apply(null, { length: 7 }).map(Number.call, Number);
return React.createElement(
'div',
{ className: 'r-row r-weekdays' },
(() => {
if (that.props.weekNumbers) {
return React.createElement(
'div',
{ className: 'r-cell r-weeknum' },
'wn'
);
}
})(),
haystack.map(function (item, i) {
return React.createElement(
'div',
{ className: 'r-cell' },
that.props.dayNames[(that.props.startDay + i) % 7]
);
})
);
}
});
var MonthDates = React.createClass({
displayName: 'MonthDates',
statics: {
year: new Date().getFullYear(),
month: new Date().getMonth(),
date: new Date().getDate(),
today: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
},
render: function () {
var haystack,
day,
d,
current,
onClick,
isDate,
className,
weekStack = Array.apply(null, { length: 7 }).map(Number.call, Number),
that = this,
startDay = this.props.firstOfMonth.getUTCDay(),
first = this.props.firstOfMonth.getDay(),
janOne = new Date(that.props.year, 0, 1),
rows = 5;
if (startDay == 5 && this.props.daysInMonth == 31 || startDay == 6 && this.props.daysInMonth > 29) {
rows = 6;
}
className = rows === 6 ? 'r-dates' : 'r-dates r-fix';
haystack = Array.apply(null, { length: rows }).map(Number.call, Number);
day = this.props.startDay + 1 - first;
while (day > 1) {
day -= 7;
}
day -= 1;
return React.createElement(
'div',
{ className: className },
haystack.map(function (item, i) {
d = day + i * 7;
return React.createElement(
'div',
{ className: 'r-row' },
(() => {
if (that.props.weekNumbers) {
var wn = Math.ceil(((new Date(that.props.year, that.props.month, d) - janOne) / 86400000 + janOne.getDay() + 1) / 7);
return React.createElement(
'div',
{ className: 'r-cell r-weeknum' },
wn
);
}
})(),
weekStack.map(function (item, i) {
d += 1;
isDate = d > 0 && d <= that.props.daysInMonth;
if (isDate) {
current = new Date(that.props.year, that.props.month, d);
className = current != that.constructor.today ? 'r-cell r-date' : 'r-cell r-date r-today';
if (that.props.disablePast && current < that.constructor.today) {
className += ' r-past';
} else if (that.props.minDate !== null && current < that.props.minDate) {
className += ' r-past';
}
if (/r-past/.test(className)) {
return React.createElement(
'div',
{ className: className, role: 'button', tabIndex: '0' },
d
);
}
return React.createElement(
'div',
{ className: className, role: 'button', tabIndex: '0', onClick: that.props.onSelect.bind(that, that.props.year, that.props.month, d) },
d
);
}
return React.createElement('div', { className: 'r-cell' });
})
);
})
);
}
});
ReactDOM.render(React.createElement(Calendar, {
//onSelect: function (state) {
//console.log(this, state);
//},
//disablePast: true,
//minDate: new Date(2016, 2, 28)
}), document.getElementById("calendar"));
您发布的代码中的许多空函数都是React组件上的内置函数。其中一些不是，所以我认为作者出于其他原因将它们留白了——可能只是定义了组件的签名，等等 React组件有一个“生命周期”——本质上，这些功能决定了组件在应用程序使用过程中的特定、定义明确的点上的操作。您可以阅读有关单个功能和整个生命周期的更多信息 例如，componentDidMount将在您的组件第一次投入使用时触发—如果您想在该时间点执行某些操作，您可以将该逻辑放在这里。我喜欢将其视为类似document.onload的组件版本 还有一些函数可以帮助您控制实际的生命周期-例如，shouldComponentUpdate可以让您告诉组件何时重新渲染自身。如果您决定在状态/道具更改为foo时不希望a触发新渲染，那么您应该将该逻辑放在这里 这些函数在编写React组件时提供了很大的灵活性。默认行为在许多情况下都可以正常工作，但随着应用程序的增长和组件变得更加复杂，它们可能需要稍微定制一下
您可以在文档中阅读更多关于哪些生命周期函数可用以及如何使用它们的信息，但希望这能让您了解它们存在的原因。您发布的代码中的许多空函数都是React组件上的内置函数。其中一些不是，所以我认为作者出于其他原因将它们留白了——可能只是定义了组件的签名，等等 React组件有一个“生命周期”——本质上，这些功能决定了组件在应用程序使用过程中的特定、定义明确的点上的操作。您可以阅读有关单个功能和整个生命周期的更多信息 例如，componentDidMount将在您的组件第一次投入使用时触发—如果您想在该时间点执行某些操作，您可以将该逻辑放在这里。我喜欢将其视为类似document.onload的组件版本 还有一些函数可以帮助您控制实际的生命周期-例如，shouldComponentUpdate可以让您告诉组件何时重新渲染自身。如果您决定在状态/道具更改为foo时不希望a触发新渲染，那么您应该将该逻辑放在这里 这些函数在编写React组件时提供了很大的灵活性。默认行为在许多情况下都可以正常工作，但随着应用程序的增长和组件变得更加复杂，它们可能需要稍微定制一下
您可以阅读更多关于哪些生命周期功能可用以及如何在文档中使用它们的信息，但希望这能让您了解它们存在的原因。我不知道您所指博客文章作者的确切意图，但是，我可以给您一些关于React组件方法的提示 React现在支持ES6类和纯函数来创建组件。基本上，React.createClass已被弃用，但不建议使用它 React组件，如果以ES6经典方式编写，则带有一些内置的生命周期方法，如componentDidMount、componentDidUpdate等。它们的实例上也可以有自定义方法。在定义这些自定义方法函数时，您可能希望在组件的渲染方法中使用它们来将一些疯狂的东西渲染到DOM中。这样，您将在render方法中调用函数，如果在使用时不将这些方法作为道具传递给组件，它将抛出错误，JS将抱怨。 将空函数定义为默认道具可以帮助您绕过这些异常
我不知道你提到的博客文章作者的确切意图，但是，我可以给你一些关于React组件方法的提示 React现在支持ES6类和纯函数来创建组件。基本上，React.createClass已被弃用，但不建议使用它 React组件，如果以ES6经典方式编写，则带有一些内置的生命周期方法，如c ComponentDidMount、componentDidUpdate等。它们的实例上也可以有自定义方法。在定义这些自定义方法函数时，您可能希望在组件的渲染方法中使用它们来将一些疯狂的东西渲染到DOM中。这样，您将在render方法中调用函数，如果在使用时不将这些方法作为道具传递给组件，它将抛出错误，JS将抱怨。 将空函数定义为默认道具可以帮助您绕过这些异常