0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: javascript, react, redux, .map(), метод render, массивы элементов, react.fragment, стрелочные компоненты, state, redux-connect, destructuring</p>
1
<p>Теги: javascript, react, redux, .map(), метод render, массивы элементов, react.fragment, стрелочные компоненты, state, redux-connect, destructuring</p>
2
<p>Начинающие JS-программисты часто ругают<strong>React</strong>за большое количество кода, несмотря на то, что есть масса возможностей писать его в достаточно сжатом виде. Итак перечислим некоторые из них.</p>
2
<p>Начинающие JS-программисты часто ругают<strong>React</strong>за большое количество кода, несмотря на то, что есть масса возможностей писать его в достаточно сжатом виде. Итак перечислим некоторые из них.</p>
3
<h2>Условный рендеринг</h2>
3
<h2>Условный рендеринг</h2>
4
<p>Вместо вот таких записей:</p>
4
<p>Вместо вот таких записей:</p>
5
render() { if (flag) { return <div> <Inner /> </div> } else { return <div/> } }<p>всегда можно записать вот так:</p>
5
render() { if (flag) { return <div> <Inner /> </div> } else { return <div/> } }<p>всегда можно записать вот так:</p>
6
render() { return <div> {flag && <Inner />} </div> }<h2>Массивы элементов</h2>
6
render() { return <div> {flag && <Inner />} </div> }<h2>Массивы элементов</h2>
7
<p>Что только не пишут с массивами:</p>
7
<p>Что только не пишут с массивами:</p>
8
render() { let list = []; for (let i = 0; i < this.props.text.length; ++i) { list.push(<li key={i}> // key нужен, чтобы отличать элементы массива {this.props.text[i]} </li>) } return <ul> {list} </ul> }<h2>Есть замечательный новый метод .map()</h2>
8
render() { let list = []; for (let i = 0; i < this.props.text.length; ++i) { list.push(<li key={i}> // key нужен, чтобы отличать элементы массива {this.props.text[i]} </li>) } return <ul> {list} </ul> }<h2>Есть замечательный новый метод .map()</h2>
9
<p>Посмотрите на аргументы передаваемой функции</p>
9
<p>Посмотрите на аргументы передаваемой функции</p>
10
render() { return <ul> {this.props.text.map((item, i) => <li key={i}>{item}</li>)} </ul> }<h2>Массив элементов из метода render</h2>
10
render() { return <ul> {this.props.text.map((item, i) => <li key={i}>{item}</li>)} </ul> }<h2>Массив элементов из метода render</h2>
11
<p>Раздутый JS-код может распространяться дальше и на HTML-разметку. Например, так случилось, что из метода<strong>render()</strong>нам необходимо вернуть несколько элементов. Часто для этого заводится элемент, в котором располагается массив элементов:</p>
11
<p>Раздутый JS-код может распространяться дальше и на HTML-разметку. Например, так случилось, что из метода<strong>render()</strong>нам необходимо вернуть несколько элементов. Часто для этого заводится элемент, в котором располагается массив элементов:</p>
12
render() { return <div class="unnecessary"> <div class="row1"/> <div class="row2"/> </div> }<p>Вместо этого, можно использовать<strong>React.Fragment</strong>:</p>
12
render() { return <div class="unnecessary"> <div class="row1"/> <div class="row2"/> </div> }<p>Вместо этого, можно использовать<strong>React.Fragment</strong>:</p>
13
render() { return <React.Fragment> <div class="row1"/> <div class="row2"/> </React.Fragment> }<p>или совсем сокращённую запись:</p>
13
render() { return <React.Fragment> <div class="row1"/> <div class="row2"/> </React.Fragment> }<p>или совсем сокращённую запись:</p>
14
render() { return <> <div class="row1"/> <div class="row2"/> </> }<h2>Стрелочные компоненты</h2>
14
render() { return <> <div class="row1"/> <div class="row2"/> </> }<h2>Стрелочные компоненты</h2>
15
<p>Если у вашего компонента вдруг не оказалось внутреннего<strong>state</strong>и хуков, то вместо</p>
15
<p>Если у вашего компонента вдруг не оказалось внутреннего<strong>state</strong>и хуков, то вместо</p>
16
class MyComponent extends React.Component { render() { return <div>{this.props.text}</div> } }<p>можно написать стрелочный компонент (!):</p>
16
class MyComponent extends React.Component { render() { return <div>{this.props.text}</div> } }<p>можно написать стрелочный компонент (!):</p>
17
const MyComponent = (props) => <div>{props.text}</div><p>Стрелочные компоненты обладают рядом преимуществ, и вместо "дополнительных render-методов" в классе большого компонента вы просто можете просто вынести разметку в отдельные компоненты.</p>
17
const MyComponent = (props) => <div>{props.text}</div><p>Стрелочные компоненты обладают рядом преимуществ, и вместо "дополнительных render-методов" в классе большого компонента вы просто можете просто вынести разметку в отдельные компоненты.</p>
18
<h2>Destructuring</h2>
18
<h2>Destructuring</h2>
19
<p>Данная возможность ES6 позволяет немного сократить код. И вместо этого</p>
19
<p>Данная возможность ES6 позволяет немного сократить код. И вместо этого</p>
20
class MyComponent extends React.Component { render() { return <div className={this.props.className}> {this.props.text} </div> } }<p>можно писать</p>
20
class MyComponent extends React.Component { render() { return <div className={this.props.className}> {this.props.text} </div> } }<p>можно писать</p>
21
class MyComponent extends React.Component { render() { const {className, text} = this.props; return <div className={className}>{text}</div> } }<p>В стрелочных компонентах такое сокращение выглядит более эпично:</p>
21
class MyComponent extends React.Component { render() { const {className, text} = this.props; return <div className={className}>{text}</div> } }<p>В стрелочных компонентах такое сокращение выглядит более эпично:</p>
22
const MyComponent = (props) => ( <div className={props.className}> {props.text} </div> );<p>преобразуется в:</p>
22
const MyComponent = (props) => ( <div className={props.className}> {props.text} </div> );<p>преобразуется в:</p>
23
const MyComponent = ({className, text}) => ( <div className={className}> {text} </div> );<h2>Redux, а точнее redux-connect</h2>
23
const MyComponent = ({className, text}) => ( <div className={className}> {text} </div> );<h2>Redux, а точнее redux-connect</h2>
24
<p>В большинстве примеров по<strong>redux-connect</strong>присутствует такая запись:</p>
24
<p>В большинстве примеров по<strong>redux-connect</strong>присутствует такая запись:</p>
25
const mapStateToProps = state => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } const mapDispatchToProps = dispatch => { return { onTodoClick: id => { dispatch(toggleTodo(id)) } } } const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList) export default VisibleTodoList<p>Эту запись можно смело переписать не только таким образом:</p>
25
const mapStateToProps = state => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } const mapDispatchToProps = dispatch => { return { onTodoClick: id => { dispatch(toggleTodo(id)) } } } const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList) export default VisibleTodoList<p>Эту запись можно смело переписать не только таким образом:</p>
26
export default connect( state => ({ // чтобы arrow возвращала литерал объекта - ставим скобки () todos: getVisibleTodos(state.todos, state.visibilityFilter) }), dispatch => ({ onTodoClick: id => dispatch(toggleTodo(id)) }) )(TodoList)<p>Но и вовсе используя декораторы:</p>
26
export default connect( state => ({ // чтобы arrow возвращала литерал объекта - ставим скобки () todos: getVisibleTodos(state.todos, state.visibilityFilter) }), dispatch => ({ onTodoClick: id => dispatch(toggleTodo(id)) }) )(TodoList)<p>Но и вовсе используя декораторы:</p>
27
@connect(state => ({ todos: getVisibleTodos(state.todos, state.visibilityFilter) }), dispatch => ({ onTodoClick: id => dispatch(toggleTodo(id)) })) export default class TodoList { // ...<p>Это, разумеется, только основы, и в программе курса "Разработчик JavaScript" мы разбираем многие другие интересности!</p>
27
@connect(state => ({ todos: getVisibleTodos(state.todos, state.visibilityFilter) }), dispatch => ({ onTodoClick: id => dispatch(toggleTodo(id)) })) export default class TodoList { // ...<p>Это, разумеется, только основы, и в программе курса "Разработчик JavaScript" мы разбираем многие другие интересности!</p>
28
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
28
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
29
29