Свойства, состояние и обработка событий
Освойте эффективную передачу данных, управление внутренним состоянием и обработку взаимодействий пользователей в ваших компонентах.
«Свойства, состояние и обработка событий» — бесплатный урок Design Systems & Component Libraries на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Design Systems & Component Libraries, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Design Systems & Component Libraries содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Data Flow in Components
Components are the building blocks of UIs. To make them dynamic and interactive, we need ways for them to receive data, manage their own internal information, and react to user actions.
This lesson explores three fundamental concepts: Props, State, and Event Handling. Mastering these allows you to create truly reusable and responsive UI components.
Props: Component Inputs
Props (short for "properties") are how components receive data from their parent components. Think of them like arguments you pass to a function.
- They are immutable: a component should never modify its own props.
- They enable parent-to-child communication.
- They make components reusable by allowing different data inputs.
Passing Data with Props
Here's a simplified example. We'll create a GreetingComponent that takes a name as a prop and displays it. Notice how name is provided when the component is created.
class GreetingComponent {
private String name; // This acts like a 'prop'
public GreetingComponent(String name) {
this.name = name;
}
public void render() {
System.out.println("Hello, " + name + "!");
}
}
public class Main {
public static void main(String[] args) {
// Create a component and pass a 'name' prop
GreetingComponent userGreeting = new GreetingComponent("Alice");
userGreeting.render();
GreetingComponent guestGreeting = new GreetingComponent("Guest");
guestGreeting.render();
}
}Props are Read-Only
A crucial rule for props is that they are read-only. Once a component receives props, it should not try to change them directly.
Why? This ensures predictable behavior, makes debugging easier, and prevents unexpected side effects in other parts of your application. If data needs to change, it should be managed by state (which we'll cover next).
State: Internal, Mutable Data
While props are external inputs, state is a component's own internal data that it manages and can change over time. Think of it as the component's private memory.
- It's mutable: components can update their own state.
- It controls dynamic behavior and changes in the UI.
- Updates to state typically trigger a re-render of the component.
State in Action: A Counter
Let's simulate a simple CounterComponent. It will keep track of a number internally (its state) and have a method to increment that number. Each increment changes its internal state and "re-renders" its display.
class CounterComponent {
private int count; // This is the component's internal 'state'
public CounterComponent(int initialCount) {
this.count = initialCount;
}
public void increment() {
System.out.println("Incrementing...");
this.count++; // Modifying internal state
render(); // Simulate re-rendering after state change
}
public void render() {
System.out.println("Current Count: " + count);
}
}
public class Main {
public static void main(String[] args) {
CounterComponent myCounter = new CounterComponent(0);
myCounter.render(); // Initial display: 0
myCounter.increment(); // Count becomes 1
myCounter.increment(); // Count becomes 2
}
}Props vs. State: The Distinction
Choosing between props and state can be tricky for beginners. Here's a simple rule:
- Use Props: For data passed down from a parent component, or for data that doesn't change within the component itself.
- Use State: For data that is managed internally by the component and is expected to change based on user interactions or other events.
If a component needs to change its own data, it needs state. If it just needs to display data given to it, props are sufficient.
Event Handling: Responding to Users
Event handling is how your components react to user interactions, like clicks, key presses, or input changes. When an event occurs, an "event handler" function is triggered.
Event handlers are often used to update a component's state, which then causes the UI to reflect the new data.
Event Handling & State Updates
Let's extend our counter example. We'll simulate a Button that, when "clicked", triggers our CounterComponent to increment its state. This shows how user actions (events) drive state changes.
interface ClickListener { // Simulates an event listener
void onClick();
}
class Button {
private String label;
private ClickListener listener;
public Button(String label, ClickListener listener) {
this.label = label;
this.listener = listener;
}
public void simulateClick() {
System.out.println("Button '" + label + "' was pressed!");
if (listener != null) {
listener.onClick(); // Triggers the listener
}
}
}
class InteractiveCounter implements ClickListener {
private int count; // State
public InteractiveCounter(int initialCount) {
this.count = initialCount;
}
@Override
public void onClick() { // This is our event handler
System.out.println("Event received! Updating state...");
this.count++; // Update state
render();
}
public void render() {
System.out.println("Displaying Count: " + count);
}
}
public class Main {
public static void main(String[] args) {
InteractiveCounter app = new InteractiveCounter(0);
app.render(); // Initial display
// Create a button and link its click event to our counter's handler
Button incrementBtn = new Button("Increment", app);
incrementBtn.simulateClick(); // Simulate user click 1
incrementBtn.simulateClick(); // Simulate user click 2
}
}Quick Check: Data Flow
Consider a component that displays a user's profile picture and name. The user can also click a button to "like" the profile, and the like count updates instantly.
Which part of this component would typically be managed by props, and which by state?
Recap: Props, State & Events
Great job! You've learned the core concepts of building interactive UI components:
- Props: External, read-only data passed into a component.
- State: Internal, mutable data managed by a component, causing re-renders when changed.
- Event Handling: Functions that respond to user interactions, often updating state.
These concepts are fundamental to creating dynamic and responsive user interfaces. Keep practicing!
Изучай Design Systems & Component Libraries с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 12
- Уроки
- 48
Часто задаваемые вопросы
Урок «Свойства, состояние и обработка событий» бесплатный?
Да — полный текст урока «Свойства, состояние и обработка событий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Design Systems & Component Libraries, подпишись на CoddyKit PRO. Курс Design Systems & Component Libraries содержит 4 уроков всего.
Чему я научусь в уроке «Свойства, состояние и обработка событий»?
Освойте эффективную передачу данных, управление внутренним состоянием и обработку взаимодействий пользователей в ваших компонентах. Ты практикуешь Design Systems & Component Libraries с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Design Systems & Component Libraries?
Предыдущий опыт не требуется. Design Systems & Component Libraries на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Свойства, состояние и обработка событий»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Design Systems & Component Libraries?
Да. Каждый урок Design Systems & Component Libraries включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Компоненты без состояния и с состоянием
- Свойства, состояние и обработка событий
- Лучшие практики доступности (a11y)
- Композиция и шаблон Children