将此搜索类组件重新设计为功能组件存在问题

Question

该组件使用关键字搜索课程。我需要一些帮助，把它重新设计成一个功能组件。我需要一些指导，所以我也要学会一步一步地做这件事。

const courses = [
'Economics',
'Math II',
'Math I'
];
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
search: []
}
}
render() {
let options;
if (this.state.search.length) {
const searchPattern = new RegExp(this.state.search.map(term => `(?=.*${term})`).join(''), 'i');
options = courses.filter(option =>
option.match(searchPattern)
);
} else {
options = courses;
}
return (
<div>
<input type="text" onChange={(e) => this.setState({ search: e.target.value.split(' ') })} />
<ul>
{options.map((option, i) =>
<li key={option + i}>{option}</li>
)}
</ul>
</div>
)
}
}
ReactDOM.render(<SearchBar />, document.body)

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Answer 1

如果你知道一个类组件的生命周期，你就不难理解一个功能组件是如何工作的。

功能组件的主要兴趣在于钩子的使用。

下面是react关于组件的文档:https://fr.reactjs.org/docs/components-and-props.html

下面是react关于钩子的文档:https://fr.reactjs.org/docs/hooks-intro.html

下面是一个功能组件的例子:

function SearchBar() {
const [search, setSearch] = useState([]);   
let options;
if (search.length) {
const searchPattern = new RegExp(search.map(term => `(?=.*${term})`).join(''), 'i');
options = courses.filter(option => 
option.match(searchPattern)
);
} else {
options = courses;
}

return (
<div>
<input type="text" onChange={(e) => setSearch(e.target.value.split(' '))}/>
<ul>
{options.map((option, i) => 
<li key={option+i}>{option}</li>
)}
</ul>
</div>
)
}
ReactDOM.render(<SearchBar />, document.body)