react笔记

谁借莪１个温暖的怀抱￠ 2021-12-20 11:25 275阅读 0赞

1、使用类时用：className

2、label标签属性的for改用htmlfor

3、vScode快速生成代码快捷件的插件：Simple React Snippets

4、组件的建立与使用

新建子组件js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70][]

父组件引入并使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1][]

4、组件传值：**父组件向子组件传递内容，靠属性的形式传递，如 xxx=\{value\}**

父组件传值和方法给子组件：

<XiaojiejieItem content={value} index={index} deleteItem={this.deleteItem.bind(this)} key={index+value}/>

子组件使用父组件传过来的值和方法：

//使用值
    <div onClick={this.handleClick}>{this.props.content}</div>
    
    //使用方法
        handleClick(){
            this.props.deleteItem(this.props.index) //使用父组件传过来的方法
        }

5、方法绑定this，构造方法形式

constructor(props){
            super(props)
            this.handleClick=this.handleClick.bind(this) //绑定this
        }

二、使用reacthook

useState---》设置变量

const [ sex , setSex ] = useState('男')

# #

useEffext---》代替声明周期

useEffect(()=>{
            console.log('useEffect=>老弟你来了！Index页面')
            return ()=>{
                console.log('老弟，你走了!Index页面')
            }
        },[])

useContext===>使父子之间传值简单

<CountContext.Provider value={count}>
        <Counter />
    </CountContext.Provider>
    
    //Counter是子组件、要传count

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70]: /images/20211220/62c8ecde9f5f442b99db43f767fcfa2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_16_color_FFFFFF_t_70 1]: /images/20211220/17a2c6575d434c0dadbc17af6cbedfee.png

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关 React笔记

文章目录 React笔记第1章：React入门 1.1 React简介 1.1.1 官网

Bertha 。/ 2022年12月29日 09:59/ 0 赞/ 206 阅读

相关 react笔记

react笔记 state和props state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什

亦凉/ 2022年11月20日 09:49/ 0 赞/ 264 阅读

相关 React学习笔记

认识 React React 是 facebook 开源的一套框架，可总结为以下几个特点：基于 JSX 语法糖实现 JUST THE UI：在多层架构的设

分手后的思念是犯贱/ 2022年08月21日 02:17/ 0 赞/ 211 阅读

相关 React 笔记

1、ReactDOM.render() //React最基本的方法，用于将模板转为HTML，并插入制定的DOM节点。 2、JSX语法 //允许HTML与Java

青旅半醒/ 2022年06月07日 12:18/ 0 赞/ 149 阅读

相关 react笔记

webpack常用loader （经常更新，请参考最新版配置） \\react \\ react-dom babelify babel-preset-react babel

雨点打透心脏的1/2处/ 2022年05月30日 09:18/ 0 赞/ 187 阅读

相关 react-笔记二

React 是什么？？？ > 用脚本进行DOM操作的代价很昂贵。有个贴切的比喻，把DOM和JavaScript各自想象为一个岛屿，它们之间用收费桥梁连接，js每次访问DOM，

傷城~/ 2022年05月30日 03:41/ 0 赞/ 206 阅读

相关 React笔记（三）

React代码规范 > 需要绑定this的方法可以在组件的constructor里提前操作 constructor(props) { super

淩亂°似流年/ 2022年01月19日 04:13/ 0 赞/ 255 阅读

相关 react hooks 笔记

1. 建议安装以上版本： "dependencies": { "react": "^16.7.0-alpha.2", "react-d

心已赠人/ 2021年12月21日 00:13/ 0 赞/ 278 阅读

相关 react笔记

1、使用类时用：className 2、label标签属性的for改用htmlfor 3、vScode快速生成代码快捷件的插件：Simple React Snippets

谁借莪１个温暖的怀抱￠/ 2021年12月20日 11:25/ 0 赞/ 276 阅读

相关 React (3) react 笔记

1. react 特点 1. 声名式开发 (可以减少大量操作dom) 2. 可以与其他框架并存 (react 只挂载一个元素上, 其他框架挂用另外元素就行了) 3.

傷城~/ 2021年09月17日 01:36/ 0 赞/ 384 阅读