Я пишу это с опозданием на несколько недель, но хотел сохранить серию.
День 21. Учимся писать JSON-объекты
- Я начал учиться писать объекты JSON, работая над завершением демонстрации своего сайта социальной сети (ранее известного как ComicBB).
- Я узнал, что вы можете сфокусировать текстовый ввод по его ссылке и вызвать на нем фокус. (но позже узнал, что использование «ref» в reactjs устарело.
componentDidMount() {
this.focusNameInputField();
}
focusNameInputField() {
this.refs.usernameField.focus();
}
<TextField
ref=”usernameField”
style={styles.textField}
floatingLabelText=”Username”
floatingLabelFixed={true}
/>
День 22. Прислушиваемся к советам людей, которые уже это сделали.
Я узнал о propTypes, они используются для проверки свойств, которые, как ожидается, получит реагирующий компонент, и типа данных, которые они должны получить.
День 23. «Если ты не используешь это, ты это теряешь»
Я добавлял firebase в свой проект социальной сети и забыл, как настроить firebase. Я не делал заметок в первый раз, когда использовал его, и мне пришлось вернуться и посмотреть пример проекта, который я использовал раньше. (не забуду снова делать заметки).
День 24–25
Я начал изучать Redux, думая, что он мне понадобится при работе над моим проектом (ComicBB), потому что я не знал, как проверить аутентификацию в других компонентах. К счастью, позже в тот же день я понял, что модуль «Re-base», который я использовал для получения информации о Firebase, имеет метод аутентификации.
Я использовал этот метод аутентификации в своих дочерних компонентах, и теперь я могу отображать конкретную информацию для вошедших в систему пользователей и неавторизованных.
Я узнал, что как только пользователь вошел в систему, я могу передать это состояние входа и информацию о пользователе в состояние и использовать его во всем моем приложении. (Когда я это печатаю, это безопасно?)
На этой неделе я в основном столкнулся с проблемой при попытке выяснить аутентификацию, опубликовать информацию в моей базе данных firebase и получить эти данные из промисов ES6.
Я начал практиковать жизненные циклы компонентов в reactJS и узнал, что «componentDidMount» — лучшее место для применения изменения состояния, а не внутри рендеринга. В моем приложении Street Fighter, которое я сделал ранее, я добавил несколько функций в функцию рендеринга, и это было очень медленно при переключении между персонажами. Но я не вижу этого заикания при вызове функций из componentDidMount. Приведенный ниже код — это то, что я использовал для настройки лайков, избранного и комментариев для каждого сообщения.
componentDidMount() {
let post_likes = this.props.post.likes;
let post_favs = this.props.post.favorites;
let post_comments = this.props.post.comments || [];
auth.onAuthStateChanged(user => {
console.log(user);
if (user) {
this.setState({
loggedIn: true,
user: {
...this.state.user,
email: user.email,
avatar: user.photoURL
},
likes: post_likes,
favorites: post_favs,
comments: post_comments
}, function () {
//check the post likes if the user liked it
if(this.state.likes && this.state.likes.includes(this.state.user.email)){
this.setState({
liked: true
});
} else {
this.setState({
liked: false
});
}
if (this.state.favorites && this.state.favorites.includes(this.state.user.email)) {
this.setState({
favorited: true
});
} else {
this.setState({
favorited: false
});
}
});
}
});
}
Вот ссылка на WIP-версию моего проекта в социальной сети.
