React学习笔记

本文介绍了React的基础知识,包括JSX语法、ReactDOM渲染方法及组件生命周期等,并探讨了组件间通信方式与组合组件技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

凡是使用 JSX 的地方,都要加上 type=”text/babel”

<script type="text/babel">
      // ** Our code goes here! **
    </script>

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言 并插入指定的 DOM 节点

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

1、JSX的使用:利用JSX编写DOM结构,可以用原声的HTML标签,也可以像普通标签一样引用React组件,这两者约定通过大小写来区分。
小写的字符串是HTML标签,大写开头的变量是React组件。
2、属性值使用表达式,用{}替换“”
3、子组件作为表达式使用
4、注释:在JSX中使用注释同Javascript,唯一要注意的就是在一个组件的子元素位置使用注释要用{}包起来

var content = (
    <Nav>
        {/*child comment,put {} around */}
        <Person
            /*multi
            line
            comment*/
            name={window.isLoggedIn ? window.name : ''}//end of line comment
/>
    </Nav>
);

5、扩展属性:传入的对象属性可以通过复制到组件的props上

var props = {};
props.foo = x;
props.bar = y;
var component = <Component{...props}/>

组件生命周期

主要包括组件的挂载,组件的更新,组件的移除
1、组建的挂载期
componentWillMount:组件渲染前执行且只执行一次componentDidMount:组件渲染后执行,只执行一次
2、组件的更新期
componentWillReceiveProps:当组件接手到新的props执行,它不会在初始化渲染时调用
shouldComponentUpdate:当有新的props或者state时,在render前调用,它也不会再初始渲染时调用
componentWillUpdate:当接收到新的props或状态时,在渲染前会被直接调用,它也不会再初始化渲染时调用componentDidUpdate:当组件更新到DOM后,这个方法被直接调用,它也不会在初始化渲染时调用
3、组件的移除
componentWillUnmount:组件从DOM移除前,被直接调用

组件间的通信

1、通过props属性传递,在父组件给子组件设置props,然后子组件就可以通过props访问到父组件的数据/方法,这样就搭建起了父子组件间通信的桥梁
2、父组件访问子组件:用refs
3、非父子组件间的通信,可以通过setState更新UI.这种模式在复杂应用中难维护,推荐使用redux(redux是JS状态容器,提供可预测化的状态管理,redux应用中只有一个单一的store)

组合组件

构建模块化组件,组装复杂应用
1、循环插入子元素:每个子元素都需要通过一个特殊key属性指定一个唯一值。key必须直接在循环中设置
2、this.props.children:组件标签里面包含的
子元素会通过props.children 传递进来。

核心概念:

1、在react中我们通过state来控制状态的改变,当项目变得足够庞大时,未来更好的维护state,我们引入redux来统一控制状态
2、要想更新state中的数据,需要发起一个action,Action就是一个普通javascript对象用来描述发生来什么

{
    type:"GET_HOT_PRODUCTS",
    data:{a:'1'}
}

3、为来把action和state串起来,开发一些函数,这就是reducer.reducer是一个纯函数,接收旧state和action,返回新的state

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值