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实战项目干货

相关推荐
慧一居士22 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead24 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js