코틀린과 주 갈고리

스칼라블에서 우리는 코틀린에게 반했어!환경을 개선하는 것은 우리의 일상적인 임무의 일부분이다.우리도 Kotlinks의 모든 것을 쉽게 사용할 수 있도록 하고 싶습니다.
코드 정리 작업의 일부로서 우리는 본 강좌에서 상태 관리를 깊이 있게 연구할 것이다.😎useState 관리하는 React Hooks의 일부, 심지어 state 와 Javascript 엔지니어도 때때로 어려움을 겪는다.우리는 KotlinJS와 영원히 믿을 수 없는Kotlin-React 라이브러리를 사용하여 React 생태계의 이런 투쟁을 줄일 것이다.

상태를 이해하다

우리가 무엇을 시도하고 있는지 알아보기 위해서는 Typescript 프로그래밍 중의 react 내용을 파악해야 한다.
우리 시작합시다!

국가 소개

React 라이브러리는 구성 요소에 내장state 관리 객체를 제공합니다.이 state 대상에서 우리는 React 구성 요소의 상태를 동적으로 저장하고 조작할 수 있다.상태 객체가 변경되면 구성 요소가 업데이트된 상태로 다시 나타나고 UI 변경 사항이 반영됩니다.

그것은 어떻게 일을 하는가

일을 수동적으로 유지하다

우리는 state를 구성 요소의 동적 데이터를 저장하기 때문에 수동적이라고 묘사할 수 있다.state 대상 자체는 구성 요소가 데이터의 변경과 업데이트를 추적하고 보기를 렌더링할 수 있도록 한다.그것의 작업 원리는 Observer Pattern와 유사하다. 왜냐하면 관찰자에게 그들이 관찰하고 있는 유효 부하에서 발생하는 모든 사건에 대한 데이터를 알리는 구독 메커니즘을 정의했기 때문이다.
다음은 state 클래스와 기능 구성 요소를 소개할 것입니다.

클래스 내 상태 구성 요소

유상태 클래스 구성 요소는 lifecycle aware이고 state에서 정의되었습니다state.그것들은 또한 external interface를 클래스 속성The state Hook에서 소개하거나 구조 함수로 초기화할 수 있다. 이 두 가지 방법은 모두 같은 결과를 얻을 수 있다.
사용자 정의 useState 를 처음 초기화할 때, 상태 감지의 속성 값 state 과 getter 을 만들 것입니다.Getter의 이름은 Kotlin (see naming properties in Kotlin) 의 속성 변수와 유사합니다. 예를 들어 setter 또는 count 이 가지고 있는 데이터에 대한 설명입니다.word의 데이터를 업데이트하기 위해서 getter로 정의된 함수를 사용합니다.이 함수의 Lambda 블록에서 업데이트할 변수에 액세스할 수 있습니다.

/**
 * A class component extends from [RComponent]. There is no requirement for
 * an external prop or state. The values of [RProps] and / or [RState]
 * can be provided without the need to declare external interfaces reflecting these.
 */
private class IndentWithDot : RComponent<RProps, IndentState>() {
    /**
     * To initialise the `state` when the class component is created we
     * must override the `RState.init()` function corresponding to the external
     * interface we provided to the component. In our case its `IndentState.init()`
     *
     * @see RComponent<IndentProps, IndentState> — (We're interested in IndentState)
     * @see IndentState
     */
    override fun IndentState.init() {
        indentAmount = 1
        indentationValue = "."
    }

    /**
     * The render function gets called when the component mounts or is updated.
     * Code inside the render function gets rendered when called.
     *
     * In our render function we have a single [button] that updates
     * the [indent] each time its pressed and displays the current update to the user.
     *
     * In order to read the `indentationValue` and `indentAmount` we need to reference the `state` from our class
     * and get the `indent` values from it.
     * @see IndentState
     *
     */
    override fun RBuilder.render() {
        div {
            button {
                // Update the string using the values from state.indentationValue and state.ident
                +"press me to add another dot indent ${state.indentationValue} ${state.indentAmount}"
                attrs {
                    onClickFunction = {
                        setState {
                            /**
                             * Reference the value of the `state.indent` and add 1.
                             * This will become the new value of `indent`.
                             */
                            indentAmount = state.indentAmount + 1
                            indentationValue = ".".repeat(indentAmount)
                        }
                    }
                }
            }
        }
    }
}

/**
 * ReactBuilder function used to construct the React Component IndentWithDot.
 */
fun RBuilder.indentByDots() = child(IndentWithDot::class) {}

코드가 작동하는지 봅시다!

비록 클래스 구성 요소는 아무런 문제가 없지만 매우 지루하고 무거울 수 있기 때문에 setState 갈고리와 기능 구성 요소를 사용하여 최적화할 때 이 코드의 외관을 비교해 봅시다!

국가 갈고리!

React 16.8까지는 기능 부품을 수용할 수 없습니다useState.다행히도 우리는 지금 React Hooks를 사용할 수 있다. state의 기능을 포함하기 때문에 상황은 더 이상 그렇지 않다!
그 전에 이들의 관건적인 차이점 중 하나는 기능 구성 요소가 추상적useState 속성을 보존하는 능력이 부족하다는 것이다.state 갈고리가 도입됨에 따라 현재 대체 방안이 생겼다.

val (word, setWord) = useState("")

위의 예는 유형이 useState인 간단useState 변수를 보여 준다.기본값은 String 함수의 매개 변수에서 초기화됩니다. 즉, useState값은 useState("hello")값getter으로 선언됩니다."hello"의 값을 업데이트하기 위해서 우리는 함수word를 사용합니다.본질적으로setWord("World")는 흡기자이고, word는 이전자이다.
실제로 우리는 by 키워드 의뢰setWord와 get의 set를 사용하여 이 논리를 더욱 정리할 수 있다.

var wordState by useState("")

위탁에서 이익을 얻기 위해서는 실례화 상태 변수의 방식을 바꾸어야 한다.useState 기능을 가지려면 속성의 유형이 가변적이어야 한다. 즉state부터val.var와 get 두 채를 보류할 필요도 없다.변수의 이름을 바꾸는 것은 매우 중요하다. 왜냐하면 그것은 숨겨진 슈퍼 능력을 가지고 있기 때문이다.
여기 @sKalable에서 우리의 코드와 숨겨진 기능을 더 잘 알 수 있도록 set 접미사를 붙이는 것이 좋습니다.

기능 구성 요소의 상태

클래스 구성 요소를 기능 구성 요소로 재구성합시다!

/**
 * [indentWithDot] is a react [functionalComponent]. This type of component is not
 * lifecycle aware and is more lightweight than a class component [RComponent].
 */
private val indentWithDot = functionalComponent<RProps> {
        /**
         *  To initialise the state within the function component we need to
         *  declare the [useState]s as the first variables in the function. Doing
         *  so ensures the variables are available for the rest of the code within
         *  the function.
         *
         *  Using the `by` keyword allows for delegation of the get and set of [useState]
         *  into the indentState var.
         *
         *  @see IndentState for state values
         */
        var indentState by useState<IndentState>(object : IndentState {
            override var indentAmount = 1
            override var indentationValue = "."
        })

        /**
         *  In a [functionalComponent] (FC) the last code block should always be the HTML to
         *  render. Compared to a class component, there is no RBuilder.render() as the HTML
         *  at the end of the function is what gets rendered. A FCs first param is a lambda extending
         *  from [RBuilder] itself so RBuilder.render() is not required.
         *
         *  As we can see, the [button] we render within [div] has an [onClickFunction] attribute that
         *  handles click events.
         *
         *  Here, when handled, we update the [IndentState.indentAmount] by adding one.
         *  [IndentState.indentationValue] is then updated by adding a number of "."s equal
         *  to the amount of [IndentState.indentAmount].
         *
         *  This value is then reflected in the text of the button.
         */
        div {
            button {
                /**
                 * Update the string using the values from [IndentState.indentationValue] and [IndentState.indentAmount]
                 */
                +"press me to add another dot indent from FC ${indentState.indentationValue} ${indentState.indentAmount}"
                attrs {
                    onClickFunction = {
                        indentState = object : IndentState {
                            /**
                             * reference the value of the [IndentState.indentAmount] and increment by one.
                             * The value of [IndentState.indentationValue] is then updated with a number of "."s
                             * equal to the new amount of [IndentState.indentAmount]
                             */
                            override var indentAmount = indentState.indentAmount + 1
                            override var indentationValue = ".".repeat(indentAmount)
                        }
                    }
                }
            }
        }
    }

/**
 * ReactBuilder function used to construct the React Component IndentWithDot.
 */
fun RBuilder.indentByDotsFC() = child(indentWithDot) {}

코드를 다시 실행하면, 코드의 작업 원리가 이전과 완전히 같고, 단지 더 적은 샘플 파일을 사용했을 뿐이다.

우리는 클래스와 함수 구성 요소에서 상태를 사용하는 두 가지 방법이 있습니다.

총결산

유효한 코드는 깨끗하고 읽기 쉬운 코드입니다.또한 여러 상태를 어떻게 처리해야 하는지 알고 싶을 수도 있습니다.KotlinJS와 State Hooks의 두 번째 부분에서 이 점을 소개합니다!
여느 때와 마찬가지로, 당신은 위의 예시 항목을 찾을 수 있습니다. here
시간을 내서 우리와 함께 공부해 주셔서 감사합니다!편하게 손을 내밀어 인사하세요.
@sKalable 우리는 Kotlin을 중심으로 하는 기구로 코드를 구축하여 유지보수와 유연성을 확보하는 것을 책임진다. 물론 sKalable도 있다.
Kotlin Multiplatform의 최신 정보를 받아서 귀하의 업무나 개인적 요구를 충족시킬 수 있도록 계속해서 저희를 주목해 주십시오.