2020-03-26

react组件渲染和父子组件之间的通信

1. 创建应用

npx create-react-app react-demo
cd react-demo
npm run start/yarn start

可能会遇到如下报错：

error @typescript-eslint/eslint-plugin@2.25.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "9.6.1"
error Found incompatible module.

执行以下命令之后，重新创建

yarn config set ignore-engines true

2. jsx 语法

1、返回标签形式的代码结构
2、标签里可以写表达式，但不可以是语句
3、特定属性
i 通过使用引号，来将属性值指定为字符串字面量
ii 也可以使用大括号，来在属性值中插入一个 JavaScript 表达式。
4、JSX 表示对象：createElement
jsx

  const element = (  
    <h1 className="greeting">  
      Hello, world!
    </h1>
  )
  const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
  );
  // 注意：这是简化过的结构
  const element = {
    type: 'h1',
    props: {
      className: 'greeting',
      children: 'Hello, world!'
    }
  };

3. 元素渲染

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

4. 组件props

1. 自定义组件
2. 自定义组件接收的属性，转换为单个对象props来获取

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

5. 编辑todoList demo演示state操作,父子组件传参

1. todoList通过按钮实现增加删除和绑定
2. 组件拆分,将todoList拆分成todoItem:父组件通过属性传 递参数给子组件，子组件通过props来接收
3. 子组件向父组件传值:要调用父组件传递的方法
4. 代码优化

6. css样式

className\style\fragment