React基础知识 精简全面 推荐

这篇博文主要对一些刚入门react框架的同学,以及对react基本知识进行巩固的,最后就是精简一下基本知识,以方便自己查看,感谢参考,有问题评论区交流,谢谢。

目录

1.JSX

[2.Props 和 State](#2.Props 和 State)

3.组件生命周期

[4.列表 和 Keys](#4.列表 和 Keys)

5.事件处理

6.表单


没有配置React的同学请参考:React 开发环境搭建 超详细 全面 推荐-CSDN博客

1.JSX
复制代码
const  element = <h1>Hello,world!</h1> ;

这是一段jsx代码,语法看起来很像html,实际上jsx语法所用的标签可以使用html标签,也可以使用自定义的react组件作为jsx中的标签。

jsx可以使用变量,name就是一个变量,注意:变量要用大括号括起来 { }

复制代码
const  name = 'young';
const  element = <h1>Hello,{name}!</h1> ;
2.Props 和 State

这两个都是很重要的概念。react组件正常工作都需要依赖这两个组件,这两者都与react的状态有关系,两者的区别是 props是对外的,state是组件对内的接口。具体理解是

props是外部组件通过props将状态或者方法传递给当前组件来使用,所以props是父组件与子组件之间传递的接口;

state是组件内部的接口,用于维护组件内部的状态;

总之一句话 props是对外的,state是对内的。

3.组件生命周期

是react对外暴露出来的钩子函数,我们开发的时候可以在这些函数中定义一些逻辑,来实现业务功能逻辑。

这里分享几个常用的且比较重要的方法。

组件的挂载阶段:constructor(),render(),componentDidMount()

组件的更新阶段:render(),componentDidUpdate()

组件的卸载阶段:componentWillUnmount()

4.列表 和 Keys

渲染列表也是比较常用的,这里keys的值都是不相同的,为了保证当列表发生变化的时候react底层把key作为每一项的唯一标识。

复制代码
const numbers = [ 1,2,3,4,5,6 ];
const listItems = numbers.map((number) = > \
    <li key={number.toString()} >
        {number}
    </li>
);

const todoItems = todos.map((todo) => 
    <li key = {todo.id}>
        {todo.text}
    </li>
);
5.事件处理

5.1事件处理是和用户。进行交互必不可少的。注意react中事件名 onClick 是驼峰的写法C大写的

复制代码
html中事件

<button onclick="addUser()"> 
  add
</button>


React 中添加事件
<button onClick={addUser}> 
  add
</button>

5.2 事件this指向问题。在构建函数中有这一句 this.handleClick = this.handleClick.bind(this);

为这个handleClick绑定了 this ,这个this就是当前的组件,如果没有这一句话,this指向的是当前组件的event点击事件对象。

复制代码
class Toggle extends React.Component {
    constructor(props){
        super(props);
        this.state = {isToggleOn: true};
        
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(preState => ({
            isToggleOn: !preState.isToggleOn
        }));
    }
}
render(){
    return (
        <button onClick={this.handleClick}>
            {this.state.isToggleOn? 'ON':'OFF'}
        </button>
    )
}

此外还有es6的箭头函数同样也能实现这种效果,即上面的代码handleClick绑定this部分 也能换成下面代码

复制代码
handleClick = () => {
    console.log('this is:',this);
}
6.表单

我们可以通过使 React 的 state 成为 "单一数据源原则" 来结合这两个形式,然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式,其值由 React 控制的输入表单元素称为"受控组件"。

在使用表单组件的时候推荐使用组件受控的方式

下面的代码例子中input输入框中 绑定onChange事件,当用户输入修改输入框内容,会触发onChange事件,事件处理拿到用户修改后的数据赋值给state.value的值,state发生变化,组件会重新被渲染,render方法重新被执行,input中的 value={this.state.value}重新设置成新的value值。

这样就保证了value的值是通过state状态的管理。

复制代码
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

有了这些基础知识来新建一个自己的React项目吧React如何搭建开发环境 创建一个新项目:

React 开发环境搭建 超详细 全面 推荐-CSDN博客

有问题评论区欢迎交流,谢谢参考。

react实战项目请参考:react实战项目干货

相关推荐
前端的日常几秒前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常2 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10186 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28113 分钟前
Chrome插件开发
前端
前端 贾公子26 分钟前
Monorepo + vite 怎么热更新
前端
coding随想34 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端