Directorio de artículos
prefacio
El último artículo le dio una breve introducción a React.Desde el comienzo de este artículo, lo llevaré a aprender React de lo simple a lo profundo, y comenzaré a experimentar la sintaxis única de React.
Si ha estudiado Vue anteriormente, se recomienda olvidarse de la sintaxis de Vue por el momento. De lo contrario, para los entusiastas de Vue, escribir React será realmente poco acostumbrado y difícil de entender sus operaciones de sintaxis, pero después de familiarizarse, también encontrará la encanto de reaccionar.
Reaccionar primera experiencia
Primero introduzca las bibliotecas relacionadas con la reacción en la página
<!-- react底层核心库 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- react操作DOM的核心库,类似于JQuery -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 用于解析ES6语法 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Luego comience a escribir código en el cuerpo:
primero agregue una etiqueta <div> vacía como marcador donde desea mostrar el contenido con React, y agregue una identificación,
luego defina el contenido div en el script y use la sintaxis fija de React ReactDOM .render para generarlo y mostrarlo en el cuadro con id root2
<body>
<div id="root2"></div>
<script type="text/babel">
// ES6方法需要引入babel,必须要使用type=text/babel
// Babel会把JSX转译为一个名为React.createElement()函数调用
let div = <div><h1>hello world</h1></div>
ReactDOM.render(
div,
document.getElementById('root2')
)
</script>
</body>
Imagen de efecto: esto funciona con éxito ~
renderizado de elementos
Obtenga la hora actual y reprodúzcala, y he escrito comentarios en las partes clave del código detrás
<div id="root"></div>
<script type='text/babel'>
function tick() {
// 在React里面,组件时由元素构成的
let time = new Date().toLocaleTimeString()
let template = <div>
<h1>Hello React</h1>
<h2>现在是：{
time}</h2>
</div>
ReactDOM.render(
template,
document.getElementById('root')
)
}
// tick()
// React元素是不可变对象,一旦被创建,你就无法更改它的子元素或者属性
setInterval(tick, 1000)
// 它只会更新它需要更新的部分,把tick函数理解为模型,页面内容理解为视图,模型更改就会直接驱动视图发生改变
</script>
Ejecute la captura de pantalla:
juicio condicional
Aquí hay tres formas de escribir, la primera es usar la expresión ternaria directamente, la segunda es usar el componente de función para devolver el valor correspondiente, y la tercera es juzgar en el componente de función y luego devolver el valor.
<div id="root"></div>
<script type='text/babel'>
let flag = false
let login = <div>登录</div>
let logout = <div>登出</div>
ReactDOM.render(
flag ? login : logout,
document.getElementById('root')
)
</script>
<div id="root2"></div>
<script type="text/babel">
function App() {
let flag = true
let login = <div>登录</div>
let logout = <div>登出</div>
return flag ? login : logout
}
ReactDOM.render(
<App />,
document.getElementById('root2')
)
</script>
<div id="root3"></div>
<script type="text/babel">
let state = true
function Apps() {
if (state) {
return <div>我是登录页面</div>
} else {
return <div>我是登出页面</div>
}
}
ReactDOM.render(<Apps />, document.getElementById('root3'))
</script>
Ejecute la captura de pantalla:
componentes sin estado
En reaccionar, los componentes se pueden dividir en componentes con estado y componentes sin estado por categoría.Primero, los componentes sin estado
son los siguientes
<div id="root"></div>
<script type='text/babel'>
// 函数式组件(无状态组件)
function Hello() {
return <div>
<h1>姓名：Hello React！</h1>
<h1>年龄：Hello React！</h1>
<h1>性别：Hello React！</h1>
<h1>地址：Hello React！</h1>
</div>
}
ReactDOM.render(
<Hello/>,
document.getElementById('root')
)
</script>
Ejecute la captura de pantalla:
Valor de aprobación de accesorios de componentes sin estado
En componentes sin estado, usamos accesorios para pasar valores, de la siguiente manera
<div id="root"></div>
<script type='text/babel'>
// 函数式组件(无状态组件)
// 传值的时候，一定要记得括号中写上props
function Hello(props) {
// 在组件里可以通过props来获取我们传递的值
console.log(props)
return <div>
<h1>姓名：{
props.name}！</h1>
<h1>年龄：{
props.age}！</h1>
<h1>性别：{
props.sex}！</h1>
<h1>地址：{
props.address}！</h1>
</div>
}
ReactDOM.render(
//需要传什么值，直接在组件上写入
<Hello name='beiyu' age='8' sex='boy' address='Wu Han'/>,
document.getElementById('root')
)
</script>
Ejecute la captura de pantalla:
Al final
Este número le presenta la sintaxis JSX y los componentes sin estado. La siguiente sección le presenta los componentes con estado en React y algunas operaciones para modificar valores~~
¡Bienvenido a prestar atención y seguir actualizando! ! >>>>>