学习React的常用网址
- 旧的React官网 zh-hans.legacy.reactjs.org/docs/cdn-li…
- 最新的React官网 zh-hans.react.dev/learn/insta…
- 个人觉得任何的语言,学习的第一步就是官方文档, 现在刚刚开始学, 觉得常用的就这个, 有别的后续在慢慢补充.
第一个React 程序
说起Hello World这是我第一次手动在电脑上实现的输出, 那时候也可激动, 现在学习React 当然第一个也是它, 好似默认学习一门新语言的时候就行从Hello World开始的 首先建立一html文件, 在body中定义编写以下内容
<!-- 定义一个节点 -->
<div id="root"></div>
<!-- 引入依赖， 不同的依赖负责不同的功能， crossorigin：启动本地服务的时候直接调用回产生跨域问题 -->
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 编写type=“text/babel” 作用是让babel解析jsx的语法 -->
<script type="text/babel">
// 在当前模块内编写React代码(jsx语法)
// 通过createRoot创建一个react根， 后续内容将渲染到这个跟里
const root = ReactDOM.createRoot(document.querySelector("#root"));
// 渲染内容，至root根节点中
root.render(<h1>Hello World</h1>);
最后运行即可看到React的第一个Helo World
React中的变量及赋值
// 修改render方法
root.render(
<div>
<h1>Hello World</h1>
<button onClick={btnClick}>进入React世界</button>
</div>
);
// 定义按钮方法
function btnClick() {
// 定义变量
const message = "Welcome to the world of React";
root.render(
<div>
{/* 使用{}来包裹变量, 或者方法名来进行赋值*/}
<h1>{message}</h1>
<button onClick={btnClick}>进入React世界</button>
</div>
);
}
点击按钮后, 通过调用方法来修改message值, 赋值后重新渲染即可看到最新的效果
以上就是第一个编写的React程序以及对程序中数据的修改,重新渲染
方法提取
因为两段渲染的内容一致, 顾可以将渲染的内容进行提取, 合并成一个公共的方法, 避免代码重复的编写
// 定义变量， 变量的赋值通过一个大括号实现 {变量}
let message = "hello world";
// 方法提取
function rootRender() {
root.render(
<div>
<h2>{message}</h2>
<button onClick={btnClick}>进入React世界</button>
</div>
);
}
// 定义按钮点击的方法
function btnClick() {
message = "Welcome to the world of React";
rootRender();
}
rootRender();
代码重构
以上已经实现了React的第一个程序, 以及对文本的修改, 渲染方法的提取, 但是还不足够, 还需要进一步的对代码进行重构, 组件化. 组件化中关键的一点就是类的继承, 这个可以看阮一峰老师的入门课程: https://es6.ruanyifeng.com/#docs/class-extends
// 定义组件进行代码重构
class HelloWorld extends React.Component {
constructor(){
super()
// 固定写法, 设置组件的属性
this.state = {
message: 'Hello World'
}
}
// 定义按钮点击的方法
btnClick(){
// 固定的更新方法. 1. 通过setState来进行更新, 2.更新后会自动执行render方法进行渲染
this.setState({message: 'Welcome to the world of React'})
}
render(){
// 通过解构获取
const { message } = this.state;
return (
<div>
<h2>{message}</h2>
{/* 定义点击方法, 需要绑定this, 否则按钮点击时会报undefined
因为btnClick函数并不是主动调用的, 而是传入的函数地址, 何时被谁调用不知道,
是在React的内部调用的btnClick, 而内部调用的时候, 并不知道绑定的this是谁
*/}
<button onClick={this.btnClick.bind(this)}>进入React世界</button>
</div>
)
}
}
// 将组件渲染到页面之上
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<HelloWorld />)
JSX的基本语法
JSX的书写规范
* 1. JSX结构中只能有一个跟元素, 不能在render方法中写多个跟元素
* 2. JSX中通常会使用()将元素包裹起来, 将整个JSX当做是一个整体实现换行
* 3. jsx组件可以是单标签(必须以/结尾), 也可以是双标签
JSX的注释语法
{/* 写在JSX中的注释内容 */}
JSX中可插入的内容
-
Number/String/Array类型的可以直接显示出来
-
undefined/null/Boolean类型则不会进行显示
-
Object类的不能作为子元素进行显示, 直接显示的话会导致报错
-
可以插入表达式,字符串拼接等
-
可以插入三元表达式
-
通过方法返回值进行显示
JSX属性绑定
-
基本属性的绑定,例如title, a标签的herf属性
我是div跳转掘金 -
class属性绑定, 使用className
-
style属性绑定, 绑定对象类型
this的绑定
在React中this的绑定一共三种方式
* 第一种就是就是直接写在组件上通过bind进行绑定
* onClick={this.btnClick.bind(this)
* 第二种是写在组件构造函数中的也就是ES6 class fields
* this.btnClick = this.btnClick.bind(this)
* 第三中是写在组件上的箭头函数的写法(这是最常用也是比较推荐的一种方式)
* onClick={() => this.btnClick()}
参数的传递
根据this的绑定方式不同, 就有不同的参数传递方式
1. 当没有额外参数时, bind和箭头函数获取默认event打印出来的效果一致
2. 当有额外参数时, 通过bind绑定的参数顺序就改变了, 而箭头函数的参数顺序与传入的一致
// event不是原生的event是经过react包裹的
btnClick(event, age, name){
console.log('event:', event, 'age:' , age, 'name:', name);
}
故参数传递中, 还是this绑定中, 官方都是建议使用箭头函数的方式
条件渲染
-
根据条件设定展示不同的内容
-
根据三元表达式显示不同的内容
-
通过逻辑运算展示内容(&&)
- 因为根据JSX中可插入的内容中第2条, undefined, null, Boolean的值是不进行显示的, 故通过逻辑运算符&&来控制当内容为undefined时则不进行展示
